为一个类制作样式并为其他人删除它

Question

我想为一个<text>in创建一个 css 类<svg>，并为所有具有相同类的对象删除此类<text>，类似这样：

  $('.svg-text').on('click', function () {

      var id = $(this).attr('rel'); 

       $(this).addClass("svg-style").siblings(".svg-text").removeClass("svg-style");

    });

这是一个<text>标签的例子<svg>：

<g id="Group-4" transform="translate(13.000000, 336.000000)">

    <text rel="text-2"  class="svg-text" id="Publication-des-résu" font-family="Roboto-Bold, Roboto" font-size="12" font-weight="bold" line-spacing="16" fill="#191919">

        <tspan x="25" y="11">PUBLICATION DES RÉSULTATS DE TEST</tspan>

    </text>

    <g id="Group-9-Copy-6">

        <circle id="Oval" stroke="#B5004F" stroke-width="1.5" cx="7.42857143" cy="7.42857143" r="7.42857143"></circle>

        <g id="info" transform="translate(5.714286, 3.428571)" fill="#B5004F" fill-rule="nonzero">

        </g>

    </g>

</g>

<g id="Group-5" transform="translate(13.000000, 367.000000)">

    <text rel="text-3"  class="svg-text" id="Vérification-de-la-c" font-family="Roboto-Bold, Roboto" font-size="12" font-weight="bold" line-spacing="16" fill="#191919">

        <tspan x="25" y="11">VÉRIFICATION DE LA CONFORMITÉ</tspan>

    </text>

    <g id="Group-9-Copy-7">

        <circle id="Oval" stroke="#B5004F" stroke-width="1.5" cx="7.42857143" cy="7.42857143" r="7.42857143"></circle>

        <g id="info" transform="translate(5.714286, 3.428571)" fill="#B5004F" fill-rule="nonzero">

        </g>

    </g>

</g>

Answer 1

$('.svg-text').on('click', function() {&nbsp; //on every click&nbsp; var id = $(this).attr('rel');&nbsp; $("text.svg-text").removeClass("svg-style");&nbsp; // first remove class from every text with class .svg-text&nbsp; $(this).addClass("svg-style");&nbsp; // then re-apply on only clicked one});.svg-text {&nbsp; background-color: red}.svg-style {&nbsp; background-color: blue}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><g id="Group-4" transform="translate(13.000000, 336.000000)">&nbsp; <text rel="text-2" class="svg-text" id="Publication-des-résu" font-family="Roboto-Bold, Roboto" font-size="12" font-weight="bold" line-spacing="16" fill="#191919">&nbsp; &nbsp; &nbsp; &nbsp; <tspan x="25" y="11">PUBLICATION DES RÉSULTATS DE TEST</tspan>&nbsp; &nbsp; </text>&nbsp; <g id="Group-9-Copy-6">&nbsp; &nbsp; <circle id="Oval" stroke="#B5004F" stroke-width="1.5" cx="7.42857143" cy="7.42857143" r="7.42857143"></circle>&nbsp; &nbsp; <g id="info" transform="translate(5.714286, 3.428571)" fill="#B5004F" fill-rule="nonzero">&nbsp; &nbsp; &nbsp; <path d="M3.28882286,6.82532571 L3.18192,7.26233143 C2.86121143,7.38891429 2.60502857,7.48525714 2.41426286,7.55149714 C2.22329143,7.61794286 2.00139429,7.65099429 1.74857143,7.65099429 C1.36032,7.65099429 1.05833143,7.55588571 0.842948571,7.36697143 C0.627565714,7.17730286 0.51984,6.93696 0.51984,6.64539429 C0.51984,6.53252571 0.527657143,6.41643429 0.543908571,6.29814857 C0.560297143,6.17972571 0.586354286,6.04635429 0.622011429,5.89728 L1.02281143,4.47867429 C1.05846857,4.34283429 1.08877714,4.21412571 1.11305143,4.09241143 C1.13766857,3.97145143 1.14953143,3.86016 1.14953143,3.75997714 C1.14953143,3.57881143 1.11202286,3.45209143 1.03734857,3.38084571 C0.962674286,3.30980571 0.820182857,3.27373714 0.60864,3.27373714 C0.505028571,3.27373714 0.398537143,3.29033143 0.289988571,3.32242286 C0.18096,3.35465143 0.0877714286,3.38578286 0.00953142857,3.41472 L0.116708571,2.97737143 C0.379268571,2.87046857 0.63024,2.77892571 0.870308571,2.70294857 C1.11037714,2.62676571 1.33721143,2.58864 1.55177143,2.58864 C1.93734857,2.58864 2.23488,2.68182857 2.44381714,2.86820571 C2.65275429,3.05472 2.75718857,3.29650286 2.75718857,3.59444571 C2.75718857,3.65609143 2.75033143,3.76470857 2.73558857,3.91995429 C2.72118857,4.07554286 2.69437714,4.21810286 2.65529143,4.34777143 L2.25620571,5.76068571 C2.22349714,5.87417143 2.19408,6.00390857 2.16850286,6.14989714 C2.14210286,6.29492571 2.12948571,6.40573714 2.12948571,6.48006857 C2.12948571,6.66768 2.17131429,6.79577143 2.25517714,6.86386286 C2.33965714,6.93195429 2.48516571,6.96582857 2.69184,6.96582857 C2.78886857,6.96582857 2.89926857,6.94861714 3.02194286,6.91481143 C3.14427429,6.88100571 3.23348571,6.85131429 3.28882286,6.82532571 Z M3.39003429,0.893485714 C3.39003429,1.13965714 3.29725714,1.34989714 3.11081143,1.52276571 C2.92484571,1.69625143 2.70075429,1.78306286 2.43860571,1.78306286 C2.17563429,1.78306286 1.95099429,1.69625143 1.76290286,1.52276571 C1.57515429,1.34982857 1.48107429,1.13965714 1.48107429,0.893485714 C1.48107429,0.647794286 1.57515429,0.437211429 1.76290286,0.262148571 C1.95065143,0.08736 2.17570286,0 2.43860571,0 C2.70068571,0 2.92484571,0.0875657143 3.11081143,0.262148571 C3.29739429,0.437211429 3.39003429,0.647862857 3.39003429,0.893485714 Z"&nbsp; &nbsp; &nbsp; &nbsp; id="Shape"></path>&nbsp; &nbsp; </g>&nbsp; </g></g><g id="Group-5" transform="translate(13.000000, 367.000000)">&nbsp; <text rel="text-3" class="svg-text" id="Vérification-de-la-c" font-family="Roboto-Bold, Roboto" font-size="12" font-weight="bold" line-spacing="16" fill="#191919">&nbsp; &nbsp; &nbsp; &nbsp; <tspan x="25" y="11">VÉRIFICATION DE LA CONFORMITÉ</tspan>&nbsp; &nbsp; </text>&nbsp; <g id="Group-9-Copy-7">&nbsp; &nbsp; <circle id="Oval" stroke="#B5004F" stroke-width="1.5" cx="7.42857143" cy="7.42857143" r="7.42857143"></circle>&nbsp; &nbsp; <g id="info" transform="translate(5.714286, 3.428571)" fill="#B5004F" fill-rule="nonzero">&nbsp; &nbsp; &nbsp; <path d="M3.28882286,6.82532571 L3.18192,7.26233143 C2.86121143,7.38891429 2.60502857,7.48525714 2.41426286,7.55149714 C2.22329143,7.61794286 2.00139429,7.65099429 1.74857143,7.65099429 C1.36032,7.65099429 1.05833143,7.55588571 0.842948571,7.36697143 C0.627565714,7.17730286 0.51984,6.93696 0.51984,6.64539429 C0.51984,6.53252571 0.527657143,6.41643429 0.543908571,6.29814857 C0.560297143,6.17972571 0.586354286,6.04635429 0.622011429,5.89728 L1.02281143,4.47867429 C1.05846857,4.34283429 1.08877714,4.21412571 1.11305143,4.09241143 C1.13766857,3.97145143 1.14953143,3.86016 1.14953143,3.75997714 C1.14953143,3.57881143 1.11202286,3.45209143 1.03734857,3.38084571 C0.962674286,3.30980571 0.820182857,3.27373714 0.60864,3.27373714 C0.505028571,3.27373714 0.398537143,3.29033143 0.289988571,3.32242286 C0.18096,3.35465143 0.0877714286,3.38578286 0.00953142857,3.41472 L0.116708571,2.97737143 C0.379268571,2.87046857 0.63024,2.77892571 0.870308571,2.70294857 C1.11037714,2.62676571 1.33721143,2.58864 1.55177143,2.58864 C1.93734857,2.58864 2.23488,2.68182857 2.44381714,2.86820571 C2.65275429,3.05472 2.75718857,3.29650286 2.75718857,3.59444571 C2.75718857,3.65609143 2.75033143,3.76470857 2.73558857,3.91995429 C2.72118857,4.07554286 2.69437714,4.21810286 2.65529143,4.34777143 L2.25620571,5.76068571 C2.22349714,5.87417143 2.19408,6.00390857 2.16850286,6.14989714 C2.14210286,6.29492571 2.12948571,6.40573714 2.12948571,6.48006857 C2.12948571,6.66768 2.17131429,6.79577143 2.25517714,6.86386286 C2.33965714,6.93195429 2.48516571,6.96582857 2.69184,6.96582857 C2.78886857,6.96582857 2.89926857,6.94861714 3.02194286,6.91481143 C3.14427429,6.88100571 3.23348571,6.85131429 3.28882286,6.82532571 Z M3.39003429,0.893485714 C3.39003429,1.13965714 3.29725714,1.34989714 3.11081143,1.52276571 C2.92484571,1.69625143 2.70075429,1.78306286 2.43860571,1.78306286 C2.17563429,1.78306286 1.95099429,1.69625143 1.76290286,1.52276571 C1.57515429,1.34982857 1.48107429,1.13965714 1.48107429,0.893485714 C1.48107429,0.647794286 1.57515429,0.437211429 1.76290286,0.262148571 C1.95065143,0.08736 2.17570286,0 2.43860571,0 C2.70068571,0 2.92484571,0.0875657143 3.11081143,0.262148571 C3.29739429,0.437211429 3.39003429,0.647862857 3.39003429,0.893485714 Z"&nbsp; &nbsp; &nbsp; &nbsp; id="Shape"></path>&nbsp; &nbsp; </g>&nbsp; </g></g>

Answer 2

如果您将此用作 onlclick 函数，您将首先从具有类 svg-text 的 s 中清除所有 svg-style （如果有），然后将 svg-style 添加到单击的文本。&nbsp; var elements = document.getElementsByClassName("svg-text svg-style");&nbsp; if (elements){&nbsp; &nbsp; for (i=0;i<elements.length;i++) {&nbsp; &nbsp; &nbsp; elements[i].classList.remove("svg-style");&nbsp; &nbsp; }&nbsp; }&nbsp; this.classList.add("svg-style");