Question

我正在尝试在切换元素时将'+'更改为' - '。我尝试了一些东西但是一旦符号改变它就不会像它应该来回切换。我搜索了其他帖子，但它们不能用于我的代码。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
//Hide (Collapse) the toggle containers on load
$("trace_dump").hide();

//Slide up and down on hover
$("h3").click(function(){
    $(this).next("trace_dump").slideToggle("slow");
    $(this).text($('span').text() == '+' ? '-' : '+');
});
});
</script>

...这里是html：

<h3><span>+</span>print_r()</h3>
<trace_dump>
    print_r($e);
</trace_dump>
<h3><span>+</span>var_dump()</h3>
<trace_dump>
    var_dump($e);
</trace_dump>

我能获得一些想法吗？

Answer 1

在这一行：

    $(this).text($('span').text() == '+' ? '-' : '+');

this指的是h3而不是我认为你想要的span。试试这个：

$(this).find('span').text($(this).find('span').text()=='+'?'-':'+');

Answer 2

在内联条件检查中，您查询所有<span>元素并比较.text()内容。这显然是行不通的。使用$(this).find('span')甚至更好，就像这样：

$(this).find('span').text(function(i, text) {
    return text === '+' ? '-' : '+';
});

演示：http://jsfiddle.net/qR2NU/8/

Answer 3

<击> 您需要将其括在支持 show / hide 操作的 div 中。没有html标记trace_dump 这有效。请参阅演示here

<强>更新

jQuery(document).ready(function() {             
$("trace_dump").hide();
//Slide up and down on hover
$("h3").click(function(){
    $(this).next("trace_dump").slideToggle("slow");
    $(this).find("span").html(($(this).find("span").text().trim() == '+' ? '-' : '+'));  
}); 

});

Answer 4

我认为，在第一次调用函数后，span元素被+或 - 替换因此，从下一次调用开始，jquery根本没有找到span元素

我没有测试过，但阅读代码让我相信这一点。

可能完全删除范围并替换为+或 -

希望有所帮助

Answer 5

这也可以。如果将上下文作为第二个参数，则搜索仅限于封闭元素内。在这种情况下，它的“h3”

 var element = $('span',$(this));
    element.text(element.text() == '+' ? '-':'+');

单击以切换元素时文本更改

5 个答案: