javascript - 将变量值与元素值进行比较

Question

你好，我正在寻找将变量值与元素值进行比较，如果它们匹配则应用此样式

假设我有这个:

  // Removed$('#section7').click(function() {
    $("a[href$='section7']").click(function() { 
        //alert("Test");

        $('publishing').clone().appendTo('#publishing-version');
        $('#publishing-version publishing').contents().unwrap();

        var pubVer = $('#publishing-version').text();

        $("edition-holder a:contains('" + pubVer + "')").css('background-color', 'pink');
        console.log(pubVer);


    }); //end click func for publishing

我想将下面 HTML 代码中“edition-holder”中的 href 的值与变量 pubVer 进行比较，如果它们匹配，则将边框样式应用于相应的 href 链接。

此后我更新了代码，但我尝试了下面发布的代码示例，但仍然无法成功。甚至尝试将下面的代码单独移动到一个新文件中，但没有成功

我尝试使用包含选择器，但无法显示样式。 jQuery 中有没有一种方法可以匹配字符串，如果它们相等，则执行此操作？

因此，如果用户单击 id section7，则运行此脚本。

我在 Barmar 响应中看到下面的代码在工作，但未能让它在我这边工作。

页面上方的 HTML 代码

`**<div id="publishing-version"></div>**` //Places ver from below into this element

<publishing>Vol. 20 | May 2017</publishing>//Changes depending on article issue

    <section class="animated slideInRight" style="" id="section7">
    <div class="section-heading">
      <section-subhead>Want to read previous editions?</section-subhead>

      </div>
      <div class="row-container">
      <edition-container>
        <edition-sub>Please choose the desired one</edition-sub>

        <edition-holder><a href="/c-conv-content/may/index.html?requestid=cunastuWugufr3dr" class="edition-link">Vol. 20 | May 2017</a>
<a href="/c-conv-content/apr/index.html?requestid=sP2kufuvabu4E4Ey" class="edition-link">Vol. 19 | April 2017</a>
<a href="/c-conv-content/mar/index.html?requestid=s1oex54phlenlaXl" class="edition-link">Vol. 18 | March 2017</a>
<a href="/c-conv-content/feb/index.html?requestId=Niewlazl8yieProU" class="edition-link">Vol. 17 | February 2017</a>
<a href="/c-conv-content/index.html?requestid=dcURzXhdavLss597" class="edition-link">Vol. 16 | January 2017</a>
       </edition-holder>
      </edition-container>
      </div>

     <home class="home"><a href="#main-section"><img src="images/home.png">Back to Home Section</a></home>
    </section>

Answer 1

您可以使用:contains。您必须将变量与选择器的其余部分连接起来。

你想要的版本不在$("#publishing-version")中，它在$("publishing")中。

var pubVer = $('publishing').text().trim();
$("edition-holder a:contains('" + pubVer + "')").css('background-color', 'pink');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Publishing version:
<publishing>Vol. 20 | May 2017</publishing>
<div class="row-container">
  <edition-container>
    <edition-sub>Please choose the desired one</edition-sub>

    <edition-holder>
      <a href="/c-conv-content/may/index.html?requestid=cunastuWugufr3dr" class="edition-link">Vol. 20 | May 2017</a>
      <a href="/c-conv-content/apr/index.html?requestid=sP2kufuvabu4E4Ey" class="edition-link">Vol. 19 | April 2017</a>
      <a href="/c-conv-content/mar/index.html?requestid=s1oex54phlenlaXl" class="edition-link">Vol. 18 | March 2017</a>
      <a href="/c-conv-content/feb/index.html?requestId=Niewlazl8yieProU" class="edition-link">Vol. 17 | February 2017</a>
      <a href="/c-conv-content/index.html?requestid=dcURzXhdavLss597" class="edition-link">Vol. 16 | January 2017</a>
    </edition-holder>
  </edition-container>
</div>