如何使用Jquery在2个替代字符串之间切换innerHTML

Question

我有一个span元素,我希望切换onclick另一个元素的'Price'和'Net'之间的内容.

基本上,它需要测试现有的单元格内容以查看当前存在的单元格内容,然后将其与另一个进行交换.

像这样的东西:

<input
    type    = "checkbox"
    name    = "element1"
    onclick = "$(#element2).toggleHTML('Price', 'Net')">

<span id="element2">Price</span>

我编写了toggleHTML上面使用的方法来演示我期望它可能如何工作.

Answer 1

您可以使用html或text方法的回调函数.

$('input[name="element1"]').click(function() {
    $('#element2').text(function(_, text) {
        return text === 'Price' ? 'Net' : 'Price';
    });
});

http://jsfiddle.net/BLPQJ/

您还可以定义一个简单的方法:

$.fn.toggleHTML = function(a, b) {
    return this.html(function(_, html) {
        return $.trim(html) === a ? b : a;
    });
}

用法:

$('#element2').toggleHTML('Price', 'Net');

http://jsfiddle.net/AyFvm/