将变量值与元素值

时间:2017-05-05 00:38:26

标签: javascript jquery html css

您好我希望将变量值与元素值进行比较,如果匹配则应用此样式

说我有这个:

  // 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

我希望与版本所有者"中的href值进行比较。在下面的HTML代码中,变量 pubVer ,如果它们匹配,则将边框样式应用于相应的href链接。

我已经更新了代码,但我尝试了下面发布的代码示例,但仍然无法成功。甚至尝试将下面的代码移动到它自己的新文件中,但没有运气

我试图使用包含选择器,但我无法显示样式。有没有一种方法可以在jQuery中匹配字符串,如果它们相同,可以这样做吗?

因此,如果用户点击id部分7,则运行此脚本。

我看到下面的代码在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>

1 个答案:

答案 0 :(得分: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>