您好我希望将变量值与元素值进行比较,如果匹配则应用此样式
说我有这个:
// 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>
答案 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>