JQuery - Parents
Question
I want to display either "OPEN" or "CLOSED", depending on the conditional, in the parent, but I don't know how to do this. This code makes two <h2> headings work as a drop down list. 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> .
Javascript
<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 answers
solution1
0 ACCPTED 2011-11-08 21:25:32
When you execute a JavaScript function in HTML the way you're doing, that function has no awareness of what HTML element contains it. 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() .
Your second problem is that the h2 tag isn't a parent (container) of the span.team element. A little more DOM traversal is necessary to get to the one from the other.
http://jsfiddle.net/mblase75/fzwBM/
new 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:
$(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);
});
});
solution2
0 2011-11-08 21:32:35
Another option is to pass in the ID of the span you would like to manipulate:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.