javascript - 如何更改onclick后的文本

Question

您好，在下面的代码中我调用 onclick() 来显示 ul 数据。

 <td class="hospitails_class" onClick="">Hospitails</td>
 <td class="clinics_class" onClick="">Clinics</td>
 <td class="homecare_class" onClick="">Home Care</td>
 <td class="information_class" onClick="">Information Centers</td>

输出:

Hospitails Clinics Home Care  Information Centers

现在如果我给医院打电话 onclick.这些是我的 javascript 代码

JavaScript

<script type="text/javascript">
    $(document).ready(function () {
        $(".hospitails").click(function (event) {
            var elem = $(event.target),
                str = '',
                locs, len, i = 0,
                strArr = [];
            if (elem.hasClass('hospitails_class')) {
                str = '.hospitails_loc ul li a';

            } else if (elem.hasClass('clinics_class')) {
                str = '.clinics_loc ul li a';
            } else if (elem.hasClass('homecare_class')) {
                str = '.homecare_loc ul li a';
            } else if (elem.hasClass('information_class')) {
                str = '.information_loc ul li a';
            }
            locs = $(str);
            len = locs.length;

            for (; i < len; i++) {
                strArr.push(locs[i].text);
            }
            strArr = strArr.join('|');
            alert(strArr);
        });
    });
</script>

输出:

医院警报->类加罗尔塞勒姆果阿门格洛尔维沙卡帕特南维贾瓦达斋浦尔马来西亚

诊所警报->尼日利亚拉各斯()

家庭护理警报->类加罗尔|斋浦尔

与最后一个相同，警报值也不同。

现在基于警报显示的内容与我想在 tr 下面显示的内容相同

完整代码:

地点

<div id="locations1">
    <table cellpadding="0" cellspacing="0" border="0">
        <tr class="hospitails" onClick="">
            <td class="hospitails_class" onClick="">Hospitails</td>
            <td class="clinics_class" onClick="">Clinics</td>
            <td class="homecare_class" onClick="">Home Care</td>
            <td class="information_class" onClick="">Information Centers</td>
        </tr>
    </table>
    <div class="hospitails_loc">
        <ul>
            <li><a href="#">Bangalore</a>
            </li>
            <li><a href="#">salem</a>
            </li>
            <li><a href="#">Goa</a>
            </li>
            <li><a href="#">Mangalore</a>
            </li>
            <li><a href="#">Visakhapatnam</a>
            </li>
            <li><a href="#">Vijawada</a>
            </li>
            <li><a href="#">jaipur</a>
            </li>
            <li><a href="#">Malaysia</a>
            </li>
        </ul>
    </div>
    <div class="clinics_loc">
        <ul>
            <li><a href="#">Lagos(Nigeria)</a>
            </li>
        </ul>
    </div>
    <div class="homecare_loc">
        <ul>
            <li><a href="#">Bangalore</a>
            </li>
            <li><a href="#">Jaipur</a>
            </li>
        </ul>
    </div>
    <div class="information_loc">
        <ul>
            <li><a href="#">Andhrapradesh</a>
            </li>
            <li><a href="#">Karnataka</a>
            </li>
            <li><a href="#">Goa</a>
            </li>
            <li><a href="#">Tamil Naidu</a>
            </li>
        </ul>
    </div>
</div>

Answer 1

你的意思是这个(注意我把hospitatails改为hospital并且假设TRs上只有一门课):

FIDDLE

$(function () {
        $(".hospitals").on("click",function (event) {
            var $elem = $(event.target),
                str = '',
                locs, len, i = 0,
                strArr = [],
                elemClass=$elem.prop("class");
            if (elemClass.indexOf('_class') !=-1) {
              str = "."+elemClass.split("_class")[0]+'_loc ul li a';
              $locs = $(str);
              len = $locs.length;
              for (; i < len; i++) {
                strArr.push($locs[i].text);
              }
              strArr = strArr.join('|');
            }   
            $("#output").html(strArr.length>0?strArr:"");
        });
        $(".hospitals > td:first").click();
    });

td { padding:3px;
    border-right:  1px dashed #f0F;
    border-bottom: 1px dashed #f00;
}
#output { padding:3px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <div id="locations">
         <h1>Locations</h1>

        <div id="locations1">
            <table cellpadding="0" cellspacing="0" border="0">
                <tr class="hospitals">
                    <td class="hospitals_class">Hospitals</td>
                    <td class="clinics_class">Clinics</td>
                    <td class="homecare_class">Home Care</td>
                    <td class="information_class">Information Centers</td>
                </tr>
            </table>
            <div id="output"></div>
            <div class="hospitals_loc">
                <ul>
                    <li><a href="#">Bangalore</a></li>
                    <li><a href="#">salem</a></li>
                    <li><a href="#">Goa</a></li>
                    <li><a href="#">Mangalore</a></li>
                    <li><a href="#">Visakhapatnam</a></li>
                    <li><a href="#">Vijawada</a></li>
                    <li><a href="#">jaipur</a></li>
                    <li><a href="#">Malaysia</a></li>
                </ul>
            </div>
            <div class="clinics_loc">
                <ul>
                    <li><a href="#">Lagos(Nigeria)</a></li>
                </ul>
            </div>
            <div class="homecare_loc">
                <ul>
                    <li><a href="#">Bangalore</a></li>
                    <li><a href="#">Jaipur</a></li>
                </ul>
            </div>
            <div class="information_loc">
                <ul>
                    <li><a href="#">Andhrapradesh</a></li>
                    <li><a href="#">Karnataka</a></li>
                    <li><a href="#">Goa</a></li>
                    <li><a href="#">Tamil Naidu</a></li>
                </ul>
            </div>
        </div>
    </div>