[英]JQuery - Parents
I want to display either "OPEN" or "CLOSED", depending on the conditional, in the parent, but I don't know how to do this. 我想根据条件在父项中显示“ OPEN”或“ CLOSED”,但是我不知道该怎么做。 This code makes two
<h2>
headings work as a drop down list. 此代码使两个
<h2>
标题成为下拉列表。 I want the function to pass the parameters, and if it does not equal 1, I want to display OPEN in the <span>
of the <h2>
. 我希望函数传递参数,如果它不等于1,我想在
<h2>
的<span>
中显示OPEN。
Javascript 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 的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>
When you execute a JavaScript function in HTML the way you're doing, that function has no awareness of what HTML element contains it. 当您按照自己的方式在HTML中执行JavaScript函数时,该函数不会意识到HTML元素包含的内容。 One way to bypass that problem (my favorite way) is to put those variables in
data-
attributes for the DOM element, and use jQuery to extract and operate on them using .data()
. 绕过该问题的一种方法(我最喜欢的方法)是将这些变量放在DOM元素的
data-
attribute中,然后使用jQuery通过.data()
提取并对其进行操作。
Your second problem is that the h2
tag isn't a parent (container) of the span.team
element. 您的第二个问题是
h2
标签不是span.team
元素的父级(容器)。 A little more DOM traversal is necessary to get to the one from the other. 为了相互之间的相互了解,有必要进行更多的DOM遍历。
http://jsfiddle.net/mblase75/fzwBM/ http://jsfiddle.net/mblase75/fzwBM/
new HTML: 新的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>
new JS: 新的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);
});
});
Another option is to pass in the ID of the span you would like to manipulate: 另一个选择是传递您要操作的跨度的ID:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.