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

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

次のようなことができます：

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

Answer 3

これを試して

HTML

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

Jクエリ

$('#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");
    });
});