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

Question

我有span元素，我希望切换另一个元素的“价格”和“净”字onclick之间的内容。

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

事情是这样的：

<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/

Answer 2

这是代码： 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 3

你可以做这样的事情：

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

Answer 4

试试这个

HTML

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

使用内嵌的JavaScript

JQUERY

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

避免...

fiddle here