Change要素のテキストまたはHTMLクリック

Question

後、私はクリックでspan要素のテキストを変更したい：

$('.int-bank h2 span').text('Open List'); 
$('.int-bank h2').bind("click", function (e) { 
    $(this).next("p").toggleClass("lblock"); 
    var spn = $(this).find("span"); 
    spn.text('Close List'); 
}); 

が、第2クリックで、スパンのテキストは、「オープン・リスト」に変更されません。これどうやってするの？

Answer 1

あまりにも悪いのはありませんtoggleText() ;-)。その後

$.fn.toggleText = function (text1, text2) { 
    var curText = this.text(); 
    this.text(!$.trim(curText) ? text1 : 
     (curText == text1 ? text2 : text1)); 
    return this; 
}; 

ので、同じようにコードを簡素化：

toggleText()しない理由は、

spn.text(spn.text() == 'Open List' ? 'Close List' : 'Open List'); 

---

をねえ、私はそれをしていながら：あなたは値を自分でチェックする必要があります

$('.int-bank h2 span').text('Open List'); 
$('.int-bank h2').click(function() { 
    $(this).next('p').toggleClass('lblock'); 
    $(this).find('span').toggleText('Open List', 'Close List'); 
}); 

Answer 2

これは、これをクリックしても[開くリスト]に設定しないためです。

別に

$('.int-bank h2').bind("click", function (e) { 
    $(this).next("p").toggleClass("lblock"); 
    var spn = $(this).find("span"); 
    spn.text(spn.text() === "Close List" ? "Open List" : "Close List"); 
}); 

：

$('.int-bank h2').click(function (e) { 
    $(this).next("p").toggleClass("lblock"); 
    var spn = $(this).find("span"); 
    spn.text(spn.text() === "Close List" ? "Open List" : "Close List"); 
}); 

Answer 3

$('.int-bank h2').click(function(e) { 
    $(this).next("p").toggleClass("lblock"); 

    var spn = $("span", this); 
    if (spn.text() == 'Open List') { 
    spn.text('Open List'); 
    } else { 
    spn.text('Close List'); 
    } 
}); 

Answer 4

もう少し読みやすいオプション：

$('.int-bank h2').toggle(function() { 
     $(this).find("span").text('Close List'); 
}, function() { 
     $(this).find("span").text('Open List'); 
}); 

Answer 5

<script> 
$(document).ready(function(){ 
    var text=$('.int-bank h2 span').text(); 
    $(this).next("p").toggleClass("lblock"); 
    if(text=="Open List") 
     $('.int-bank h2 span').text('Close List'); 
    else 
     $('.int-bank h2 span').text('Open List'); 
}) 

あなたは簡潔さのために努力している場合、あなただけのclickハンドラを使用することができます

これは片道です.........

Answer 6

私はテキストを変更しません。

代わりに、各テキスト（または好きなHTML）を持つ2つの要素を作成し、それぞれCSSの クラスを付けます。

親のCSSクラスに応じて、一度に1つのみが表示されるようにCSSを変更します。例えば

クラス「lblockオン」および「lblockオフ」を使用して：

<style type="text/css"> 
    .lblock-on { display: none } 
    .lblock .lblock-off { display: none } 
    .lblock .lblock-on { display: block } 
</style> 

は.lblock-on要素は、ブロック要素が提供されます。それ以外の場合は「display: block」を「display: inline」に変更してください。 （「display: inherit」はFirefoxでは動作しますが、MSIEでは動作しません）