如何使用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