[英]JQuery - Parents
我想根據條件在父項中顯示“ OPEN”或“ CLOSED”,但是我不知道該怎么做。 此代碼使兩個<h2>
標題成為下拉列表。 我希望函數傳遞參數,如果它不等於1,我想在<h2>
的<span>
中顯示OPEN。
Java腳本
<script type="text/javascript">
var a = null;
var b = null;
var c = 1;
$(document).ready(function () {
$(".toggle_container").hide();
$("h2.trigger").click(function () {
$(this).toggleClass("active").next().slideToggle("slow");
});
});
function divide(a, b) {
(a / b != c) ?
// Where help is needed
// $(this).parent(".status").text("OPEN").css("color", "green") :
// $("team").parent(".status").text("CLOSED").css("color","red");
document.write(a + " / " + b);
}
</script>
的HTML
<body>
<div class="tournaments">
<h2 class="trigger">Tournament 1<span class="status"></span></h2>
<div class="toggle_container">
<div class="block">
<h3>Details</h3>
<p>Deadline: DATE</p>
<p>Teams: <span class="team"><script type="text/javascript">divide(3, 7)</script></span>
</p>
</div>
</div>
<h2 class="trigger">Tournament 2 <span class="status"></span></h2>
<div class="toggle_container">
<div class="block">
<h3>Details</h3>
<p>Deadline: DATE</p>
<p>Teams: <span class="team"><script type="text/javascript">divide(3,7)</script></span>
</p>
</div>
</div>
</div>
</body>
當您按照自己的方式在HTML中執行JavaScript函數時,該函數不會意識到HTML元素包含的內容。 繞過該問題的一種方法(我最喜歡的方法)是將這些變量放在DOM元素的data-
attribute中,然后使用jQuery通過.data()
提取並對其進行操作。
您的第二個問題是h2
標簽不是span.team
元素的父級(容器)。 為了相互之間的相互了解,有必要進行更多的DOM遍歷。
http://jsfiddle.net/mblase75/fzwBM/
新的HTML:
<div class="tournaments">
<h2 class="trigger">Tournament 1<span class="status"></span></h2>
<div class="toggle_container">
<div class="block">
<h3>Details</h3>
<p>Deadline: DATE</p>
<p>Teams: <span class="team" data-a="3" data-b="7"></span>
</p>
</div>
</div>
<h2 class="trigger">Tournament 2 <span class="status"></span></h2>
<div class="toggle_container">
<div class="block">
<h3>Details</h3>
<p>Deadline: DATE</p>
<p>Teams: <span class="team" data-a="3" data-b="7"></span>
</p>
</div>
</div>
</div>
新的JS:
$(document).ready(function() {
$(".toggle_container").hide();
$("h2.trigger").click(function() {
$(this).toggleClass("active").next().slideToggle("slow");
});
$('span.team').each(function() {
var a = $(this).data('a');
var b = $(this).data('b');
var $status = $(this).closest('.toggle_container').prev('.trigger').find('.status');
console.log($status.length);
if (a != b) { // if a/b!=1, then a!=b
$status.text("OPEN").css("color", "green");
} else {
$status.text("CLOSED").css("color", "red");
}
$(this).text(a + " / " + b);
});
});
另一個選擇是傳遞您要操作的跨度的ID:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.