jQuery-父母
[英]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>
2 个解决方案
解决方案1
0 已采纳 2011-11-08 21:25:32
当您按照自己的方式在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);
});
});
解决方案2
0 2011-11-08 21:32:35
另一个选择是传递您要操作的跨度的ID：
jquery .parents（）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.