代码之家 › 专栏 › 技术社区 › jbrehr

JavaScript/jQuery:基于元素和类更新textContent

jquery javascript

-1

jbrehr · 技术社区 · 6 年前

我正在尝试根据单击事件更新HTML元素的子元素的文本。用户单击跨度:

<span id="button_entitypeople" onclick="toggleentitylist(this.id)" class="fake_link">
    <span class="en">view list</span>
</span>

…它显示一个div。这样做时,我试图让它重命名 .textContent 跨越 view list 到 hide list 使用 document.getElementById(respdiv).getElementsByClassName('en').textContent

    function toggleentitylist(clicked_id)
            {{
                var respdiv
                respdiv = clicked_id.replace("button","div");
                if (!document.getElementById(respdiv).style.display | document.getElementById(respdiv).style.display == "none")
                    {{document.getElementById(respdiv).style.display = "inline"; 
                        document.getElementById(respdiv).getElementsByClassName('en')[0].textContent == "hide list";}}
                else {{document.getElementById(respdiv).style.display = "none";
                        document.getElementById(respdiv).getElementsByClassName('en')[0].textContent == "show list";}}
            }}

当div正确显示和隐藏时,文本不会更新。

注:我必须使用 getElementsByClassName 因为我将介绍几种不同的语言。

function toggleentitylist(clicked_id)
                {{
                    var respdiv
                    respdiv = clicked_id.replace("button","div");
                    if (!document.getElementById(respdiv).style.display | document.getElementById(respdiv).style.display == "none")
                        {{document.getElementById(respdiv).style.display = "inline"; 
                            document.getElementById(respdiv).getElementsByClassName('en')[0].textContent == "hide list";}}
                    else {{document.getElementById(respdiv).style.display = "none";
                            document.getElementById(respdiv).getElementsByClassName('en')[0].textContent == "show list";}}
                }}

#div_entitypeople{
    display: none;
}

#div_entityplaces{
    display: none;
}

<span id="button_entitypeople" onclick="toggleentitylist(this.id)" class="fake_link"><span class="en">view list</span></span>
<div id="div_entitypeople">
                                    <ul>
                                        <li id="Arnald_de_Pencha_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Arnald de Pencha</li>
                                        <li id="Arnald_Roger_PER-AR" class="highlight-entities" onclick="highlightEntities(this)">Arnald Roger</li>
                                        <li id="Ava_Sanci_MPX-AR" class="highlight-entities" onclick="highlightEntities(this)">Ava Sanci</li>
                                        <li id="B_de_Rochafort_SRZ-TA" class="highlight-entities" onclick="highlightEntities(this)">B de Rochafort</li>
                                        <li id="Bernard_Chap_Ladinhac" class="highlight-entities" onclick="highlightEntities(this)">Bernard, magister, chaplain of Ladinhac</li>
                                        <li id="Bernard_de_Caux_OP" class="highlight-entities" onclick="highlightEntities(this)">Bernard de Caux, OP</li>
                                        <li id="Bernard_de_Quiders_senior_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Bernard de Quiders senior</li>
                                        <li id="Bernard_de_Saint-Esteve_CAZ-AU" class="highlight-entities" onclick="highlightEntities(this)">Bernard de Saint-Esteve</li>
                                        <li id="Bertrand_de_Quiders_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Bertrand de Quiders</li>
                                        <li id="Bertrand_Marti_H" class="highlight-entities" onclick="highlightEntities(this)">Bertrand Marti</li>
                                        <li id="Braida_de_Mont_Server_SRZ-TA" class="highlight-entities" onclick="highlightEntities(this)">Braida de Mont Server</li>
                                        <li id="Cecilia_Roger_nee_de_Mont_Server_PER-AR" class="highlight-entities" onclick="highlightEntities(this)">Cecilia Roger</li>
                                        <li id="Corba_de_Pereille_PER-AR" class="highlight-entities" onclick="highlightEntities(this)">Corba de Pereille</li>
                                        <li id="Dominic_de_Catalonia" class="highlight-entities" onclick="highlightEntities(this)">Dominic de Catalonia</li>
                                        <li id="Ermengarde_de_Caucer_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Ermengarde de Caucer</li>
                                        <li id="Ermengarde_de_Mazerol_GAJ-AU" class="highlight-entities" onclick="highlightEntities(this)">Ermengarde de Mazerol</li>
                                        <li id="Estolt_de_Rochavila_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Estolt de Rochavila</li>
                                        <li id="Fauressa_del_Mas_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Fauressa del Mas</li>
                                        <li id="Ferrier_OP" class="highlight-entities" onclick="highlightEntities(this)">Ferrier, OP</li>
                                        <li id="Francesca_de_la_Ylha_MPX-AR" class="highlight-entities" onclick="highlightEntities(this)">Francesca de la Ylha</li>
                                        <li id="Galharda_de_Romengos_RMG-AR" class="highlight-entities" onclick="highlightEntities(this)">Galharda de Romengos</li>
                                        <li id="Galharda_del_Mas_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Galharda del Mas</li>
                                        <li id="Geralda_de_Rochafort_SRZ-TA" class="highlight-entities" onclick="highlightEntities(this)">Geralda de Rochafort</li>
                                        <li id="Guilabert_de_Castres_H" class="highlight-entities" onclick="highlightEntities(this)">Guilabert de Castres</li>
                                        <li id="Guilhelma_Canast_de_Paracol_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Guilhelma Canast de Paracol</li>
                                        <li id="Guilhelma_Meta_nee_del_Mas_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Guilhelma Meta nÃ©e del Mas</li>
                                        <li id="Guilhem_Canast-Brus_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Guilhem Canast-Brus</li>
                                        <li id="Guilhem_de_la_Ylha_MPX-AR" class="highlight-entities" onclick="highlightEntities(this)">Guilhem de la Ylha</li>
                                        <li id="Guilhem_de_Rochafort_SRZ-TA" class="highlight-entities" onclick="highlightEntities(this)">Guilhem de Rochafort</li>
                                        <li id="Guilhem_del_Mas_Junior_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Guilhem del Mas junior</li>
                                        <li id="Guilhem_del_Mas_Senior_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Guilhem del Mas senior</li>
                                        <li id="heretics_not_named" class="highlight-entities" onclick="highlightEntities(this)">heretics not named</li>
                                        <li id="heretics_unknown_2f" class="highlight-entities" onclick="highlightEntities(this)">2 unknown female heretics</li>
                                        <li id="heretics_unknown_3f" class="highlight-entities" onclick="highlightEntities(this)">3 unknown female heretics</li>
                                        <li id="heretics_unknown_m" class="highlight-entities" onclick="highlightEntities(this)">unknown male heretics</li>
                                        <li id="Johan_Cambiaire_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Johan Cambiaire</li>
                                        <li id="Maria_de_Quiders_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Maria de Quiders</li>
                                        <li id="Marquesa_de_Rochafort_SRZ-TA" class="highlight-entities" onclick="highlightEntities(this)">Marquesa de Rochafort</li>
                                        <li id="mother_of_Dominic_de_Catalonia" class="highlight-entities" onclick="highlightEntities(this)">mother of Dominic de Catalonia</li>
                                        <li id="Na_Fornier_de_Pereille_PER-AR" class="highlight-entities" onclick="highlightEntities(this)">Na Fornier de Pereille</li>
                                        <li id="Na_Laureta_MPX-AR" class="highlight-entities" onclick="highlightEntities(this)">Na Laureta</li>
                                        <li id="others_unrecalled" class="highlight-entities" onclick="highlightEntities(this)">many others unrecalled</li>
                                        <li id="P_Audoys_MPX-AR" class="highlight-entities" onclick="highlightEntities(this)">P Audoys</li>
                                        <li id="P_Bernard_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">P Bernard</li>
                                        <li id="P_de_las_Combas_QLE-AR" class="highlight-entities" onclick="highlightEntities(this)">P de las Combas</li>
                                        <li id="P_Raimund_Roi_MPX-AR" class="highlight-entities" onclick="highlightEntities(this)">P. Raimund Roi</li>
                                        <li id="Peire_de_Fogars_LAV-AR" class="highlight-entities" onclick="highlightEntities(this)">Peire de Fogars</li>
                                        <li id="Peire_de_Mazerol_GAJ-AU" class="highlight-entities" onclick="highlightEntities(this)">Peire de Mazerol</li>
                                        <li id="Peire_Faure_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Peire Faure</li>
                                        <li id="Peire_Fresapa_NOT" class="highlight-entities" onclick="highlightEntities(this)">Peire Fresapa, notary</li>
                                        <li id="Pelegrina_de_Mont_Server_nee_del_Mas_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Pelegrina de Mont Server nÃ©e del Mas</li>
                                        <li id="Ponca_de_Vilar_QLE-AR" class="highlight-entities" onclick="highlightEntities(this)">Ponca de Vilar</li>
                                        <li id="Raimund_Canast_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">Raimund Canast</li>
                                        <li id="Raimund_de_Pereille_PER-AR" class="highlight-entities" onclick="highlightEntities(this)">Raimund de Pereille</li>
                                        <li id="Raimund_Sanci_MPX-AR" class="highlight-entities" onclick="highlightEntities(this)">Raimund Sanci</li>
                                        <li id="Raimunda_de_Cuc_CMS-AU" class="highlight-entities" onclick="highlightEntities(this)">Raimunda de Cuc</li>
                                        <li id="Raimunda_de_Mont_Server_SRZ-TA" class="highlight-entities" onclick="highlightEntities(this)">Raimunda de Mont Server</li>
                                        <li id="Ransana_de_Fanjeaux_FJX-AU" class="highlight-entities" onclick="highlightEntities(this)">Ransana de Fanjeaux</li>
                                        <li id="Sylvestre_Chap_Verfeil" class="highlight-entities" onclick="highlightEntities(this)">Sylvestre, chaplain of Verfeil</li>
                                        <li id="W_de_Mirepoix_PAM-AR" class="highlight-entities" onclick="highlightEntities(this)">W de Mirepoix</li>
                                        <li id="Ysarn_de_Fanjeaux_FJX-AU" class="highlight-entities" onclick="highlightEntities(this)">Ysarn de Fanjeaux</li>
                                        <li id="Ysarn_de_Mont_Server_SRZ-TA" class="highlight-entities" onclick="highlightEntities(this)">Ysarn de Mont Server</li>
                                        <li id="Ysarn_de_Vilar_QLE-AR" class="highlight-entities" onclick="highlightEntities(this)">Ysarn de Vilar</li>
                                    </ul>
                                </div>
<br/>                            
<span id="button_entityplaces" onclick="toggleentitylist(this.id)" class="fake_link"><span class="en">view list</span></span>
               <div id="div_entityplaces">
                                    <ul>
                                        <li id="home_in_Queille" class="highlight-entities" onclick="highlightEntities(this)">
                                            <name><span class="en">domus in QueillÃ©</span><span class="fr">domus Ã  QueillÃ©</span></name>
                                        </li>
                                        <li id="home_of_Dominic_de_Catalonia" class="highlight-entities" onclick="highlightEntities(this)">
                                            <name><span class="en">domus of Dominic de Catalonia</span><span class="fr">domus de Dominic de Catalonia</span></name>
                                        </li>
                                        <li id="home_of_Guilabert_de_Castre" class="highlight-entities" onclick="highlightEntities(this)">
                                            <name><span class="en">domus of Guilabert de Castre</span><span class="fr">domus de Guilabert de Castre</span></name>
                                        </li>
                                        <li id="home_of_Guilhem_Canast-Brus" class="highlight-entities" onclick="highlightEntities(this)">
                                            <name><span class="en">domus of Guilhem Canast-Brus</span><span class="fr">domus de Guilhem Canast-Brus</span></name>
                                        </li>
                                        <li id="home_of_Guilhem_del_Mas_Sr_MSP" class="highlight-entities" onclick="highlightEntities(this)">
                                            <name><span class="en">domus of Guilhem del Mas senior</span><span class="fr">domus de Guilhem del Mas senior</span></name>
                                        </li>
                                        <li id="home_of_Na_Fornier_de_Pereille" class="highlight-entities" onclick="highlightEntities(this)">
                                            <name><span class="en">domus of Na Fornier de Pereille</span><span class="fr">domus de Na Fornier de Pereille</span></name>
                                        </li>
                                        <li id="home_of_Na_Laureta" class="highlight-entities" onclick="highlightEntities(this)">
                                            <name><span class="en">domus of Na Laureta</span><span class="fr">domus de Na Laureta</span></name>
                                        </li>
                                        <li id="home_of_P_de_las_Combas" class="highlight-entities" onclick="highlightEntities(this)">
                                            <name><span class="en">domus of P. de las Comabas</span><span class="fr">domus de P. de las Comabas</span></name>
                                        </li>
                                        <li id="home_of_Peire_Faure_MSP" class="highlight-entities" onclick="highlightEntities(this)">
                                            <name><span class="en">domus of Peire Faure</span><span class="fr">domus de Peire Faure</span></name>
                                        </li>
                                        <li id="home_of_Raimund_Canast_MSP-AU" class="highlight-entities" onclick="highlightEntities(this)">
                                            <name><span class="en">domus of Bernard and Raimund Canast</span><span class="fr">domus de Bernard et Raimund Canast</span></name>
                                        </li>
                                        <li id="Lavelanet_Ariege" class="highlight-entities" onclick="highlightEntities(this)">
                                            <name><span>Lavelanet</span></name>
                                        </li>
                                        <li id="Mirepoix_Ariege" class="highlight-entities" onclick="highlightEntities(this)">
                                            <name><span>Mirepoix</span></name>
                                        </li>
                                        <li id="Montsegur_Ariege" class="highlight-entities" onclick="highlightEntities(this)">
                                            <name><span>MontsÃ©gur</span></name>
                                        </li>
                                        <li id="Pamiers_Ariege" class="highlight-entities" onclick="highlightEntities(this)">
                                            <name><span>Pamiers</span></name>
                                        </li>
                                        <li id="Pereille_Ariege" class="highlight-entities" onclick="highlightEntities(this)">
                                            <name><span>PÃ©reille</span></name>
                                        </li>
                                        <li id="Saissac_Aude" class="highlight-entities" onclick="highlightEntities(this)">
                                            <name><span>Saissac</span></name>
                                        </li>
                                    </ul>
                                </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2 回复 | 直到 6 年前

medyas Maksim Novikov 6 年前

使用jQuery更容易做到这一点,您可以选择元素,然后查找子元素。此外,在函数中,您试图通过类“button\u EntityOple”查找跨度,该类使用“respdiv”变量,但您已经用div替换了该按钮,因此无效,您必须找到具有“clicked\u id”的元素,然后通过类“en”查找跨度。

function toggleentitylist(clicked_id)
        {
            var respdiv
            respdiv = clicked_id.replace("button","div");
            if (!document.getElementById(respdiv).style.display | document.getElementById(respdiv).style.display == "none"){

                    document.getElementById(respdiv).style.display = "inline"; 
                    $("#"+clicked_id).find($("."+'en')).text("Hide list");
                }
            else {
                document.getElementById(respdiv).style.display = "none";
                    $("#"+clicked_id).find($("."+'en')).text("Show list");
            }
        }

-2

Scott Marcus 6 年前

getElementsByClassName() textContent 属性,则每个节点都可以。因此:

document.getElementById(respdiv).getElementsByClassName('en').textContent == "show list";

您需要从节点列表中隔离其中一个节点。

document.getElementById(respdiv).getElementsByClassName('en')[0].textContent == "show list";