Question

我有一个标题和一个无序列表

<h2> here is some interesting links </h2>
 <ul>
  <li>link 1</li>
  <li>link 2</li>
  <li>link 3</li>
 </ul>

我喜欢的是在标签的末尾添加[+]，并隐藏以下内容

改变它的最佳方法是什么？

它看起来像：

已关闭：标题[+]

打开：标题[ - ]

-link1
-link2
-link3

Answer 1

这是我的快速即兴创作。它应该工作。

HTML：

<h2>
    here is some interesting links
    <span class="toggle" data-target="list1">-</span>
</h2>
<ul id="list1">
    <li>link 1</li>
    <li>link 2</li>
    <li>link 3</li>
</ul>

jQuery的：

$(".toggle").on("click", function() {
    var target = $(this).text(function(i, val) {
        return val == "+" ? "-" : "+";
    }).data("target");
    $("#" + target).toggle();
});

DEMO： http://jsfiddle.net/L3jep/

Answer 2

假设您当前的HTML没有变化，并且通过jQuery进行了所有修改：

$('h2').html(
    function(i,h) {
        return h + '<span>[+]</span>';
    }).on('click', 'span', function(){
        var that = $(this);
        that.closest('h2').next('ul').toggle();
        that.text(
            function(){
                return that.text().indexOf('+') !== -1 ? '[-]' : '[+]';
            });
    });

JS Fiddle demo

已编辑以解释上述代码的这一部分：

 return that.text().indexOf('+') !== -1 ? '[-]' : '[+]';

这是一个三元运算符，它会将条件（return that.text().indexOf('+') !== -1）计算为true或false。 ?之后是'if-true'响应，:之后是'if-false'响应。

因此，条件评估是否在从当前元素的+返回的字符串中找到text()个字符。我们将结果与-1进行比较，因为indexOf()返回找到的子字符串的索引。因为子字符串可以在0（字符串的开头）找到，所以indexOf()在找不到字符串时返回-1。因此，如果+是发现（因此返回的结果将不等于-1）的span元素的文本中的文本被改变为{ {1}}，如果发现[-] ，则文本将更改为+。

[-]语句只会将更改后的文本返回到return方法。

更新以修改text()方法的功能，并利用元素的文本作为函数中的第二个参数的事实：

text()

JS Fiddle demo

参考文献：

Answer 3

假设你有像这样的标记

<h2> here is some interesting links </h2>
<a  class="aExpand" href="#">+</a>
 <ul class="sub" style="display:none;">
  <li>link 1</li>
  <li>link 2</li>
  <li>link 3</li>
 </ul>

此脚本将执行此操作

$(function(){
     $(".aExpand").click(function(e){
       var item=$(this);  
        if(item.next("ul").is(":visible"))
        {         
          item.text("+").next("ul").hide();

        }
        else
        {           
            item.text("-").next("ul").show();
        }

    });    
});

工作样本：http://jsfiddle.net/BqKn5/8/

Answer 4

我的最终代码基于您的帮助，并从此处开始：How do I do string replace in JavaScript to convert ‘9.61’ to ‘9:61’?

<script type="text/javascript">
$(function(){

    $('.bulletlisttohide').hide();

    $(".plus").click( function () {
        $(this).next('.bulletlisttohide').slideToggle(500, function (){
            if ($(this).is(":visible")) { $(this).prev('.plus').html(function(i, val) { return val.replace('[+]', '[-]'); }); }
            else { $(this).prev('.plus').html(function(i, val) { return val.replace('[-]', '[+]'); }); }
        });

        return false;
    });
})
</script>

如何使用jquery在字符串中显示/添加/修改文本

4 个答案: