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

Question

我有一个元素，我希望在另一个元素span的“价格”和“净值”这两个词之间切换其内容。onclick

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

像这样的东西：

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

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

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

Answer 1

您可以使用htmlortext方法的回调函数。

$('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/

Answer 2

你可以这样做：

var html = $('#element2').html();
html = html.indexOf('Price') > -1 ? "Net" : "Price"; 
$('#element2').html(html)

Answer 3

尝试这个

HTML

<input
type    = "checkbox"
name    = "element1"
id="input1">

查询

$('#input1').click(function(){
    $('#element2').text(function(){
      return $('#element2').text()=="Price" ?"Net":"Price" ; 
    });
}); 

避免使用内联 javascript ...

在这里摆弄

Answer 4

这是代码：html：

<input type = "checkbox" name = "element1" id="element1">

Javascript：

$(document).ready(function()
{
    $("#element1").click(function()
    {
        if($("#element2").html() == "Price")
            $("#element2").html("Net");
        else
            $("#element2").html("Price");
    });
});

Answer 5

我有一个类似的问题，我的页面有多个“阅读更多”切换，假设每次点击都会更改为“阅读更少”并再次返回。但它只适用于第一次迭代。其他人只切换一次然后停止，但该链接仅适用于第一个。

代码：

$(".morelink_L3").click(function() {
  $(this).find("span").html($(".morelink_L3 span").html() == 'Read less' ? 'Read more' : 'Read less');
});

html:

<span class="moreLink morelink_L3" value="True">
     <span>Read more</span>
</span>