需要用html代码替换+/-字符(例如)—在一小段jQuery中 [英] Need to replace +/- characters with html codes (for example) — in small piece of jQuery

问题描述

我有一个相当普通的jQuery，它在单击+时切换div的可见性，并在单击-时将其隐藏(单击时+变为-).问题在于+/-切换器会跟随某些文本，该文本有时带有+或-且都在切换.例如:了解有关blah-blah +的更多信息.单击时，加号变为减号.再次单击，两个减号都变为加号.

I have a fairly mundane piece jQuery that toggles a div's visibility when a + is clicked and hides it when a - is clicked (the + changes to a - when clicked). The problem is that the +/- toggler follows some text that sometimes has a + or - in it and both toggle. For instance: Find out more about blah-blah +. When clicked, the plus changes to a minus. When clicked again, both minuses change to pluses.

我想如果我只是将+更改为+，将减号更改为&#8212；在jQuery中，它可以解决问题，但是不起作用. div可见性可以打开/关闭，但加/减符号不变.

I thought if i just changed the + to a + and a minus to a &#8212; in the jquery it would solve the problem, but it doesn't work. The div visibility toggles on/off but the plus/minus symbols don't change.

这是脚本:

function toggleSpecial(element)
{
    jQuery(element).next(".hidden").slideToggle("fast"); 
    jQuery(element).html(function(i,html) {
        if (html.indexOf('+') != -1 ){
           html = html.replace('+','-');
        } else {
           html = html.replace('-','+');
        }
        return html;
    });
}

这是用HTML代码替换+和-的脚本，该脚本不起作用.

Here is the script with HTML codes replacing the + and - which doesn't work.

function toggleSpecial(element)
{
    jQuery(element).next(".hidden").slideToggle("fast"); 
    jQuery(element).html(function(i,html) {
        if (html.indexOf('+') != -1 ){
           html = html.replace('+','—');
        } else {
           html = html.replace('—','+');
        }
        return html;
    });
}

关于我在做什么错的任何想法或建议吗?谢谢！

Any ideas about what I am doing wrong or suggestions? Thanks!

推荐答案

您正在基于可见性切换完全任意的东西.为什么不只是看它是否可见?此外，您可以将字符包装成一个跨度，然后执行以下操作:

You're basing your visibility toggling off of something totally arbitrary. Why not just see if it's visible or not? Additionally, you can just wrap the character in a span and then do something like this:

$('#iamelement').click(function() {
    var $this = $(this);
    $this.next(".hidden").slideToggle("fast", function() {
        $this.find('span').text($(this).is(':visible') ? '-' : '+');
    }); 
});

这将是这样的:

<a href="#" id="iamelement">toggle thing <span>+</span></a>
<div class="hidden">
    thing
</div>

证明在摆弄: http://jsfiddle.net/rFeeJ/1/

添加: 要使其通用，您需要使用类而不是ID.我只是想举例说明.

ADDITIONS: To make it generic, you need to use classes instead of IDs. I was merely trying to be illustrative.

<a href="#" class="toggler">toggle thing <span>+</span></a>
<div class="hidden">
    thing
</div>
<a href="#" class="toggler">toggle thing 2 <span>+</span></a>
<div class="hidden">
    thing 2 
</div>
<a href="#" class="toggler">toggle thing 3 <span>+</span></a>
<div class="hidden">
    thing 3
</div>

$('a.toggler').click(function() {
    var $this = $(this);
    $this.next(".hidden").slideToggle("fast", function() {
        $this.find('span').text($(this).is(':visible') ? '-' : '+');
    }); 
});

这篇关于需要用html代码替换+/-字符(例如)—在一小段jQuery中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！