1

特定のボタンをクリックすると起動し、特定のコンテナーの段落の値が事前定義された変数と正確に等しいかどうかを確認する jquery イベントがあります。true の場合、段落を定義した別の変数に置き換え、まったく別の要素のテキストも変更したいと考えています。

ただし、現時点では、その段落が値 (この場合は x) と等しくなくても、コードは他の要素を変更するためにパーツを起動します。これを機能させる方法はありますか？

var x = 'a string';
var y = 'a different string';
$('#element-container').on('click', '#button1', function (){
    $('#element p').filter(function() {
        return $(this).html() == x;
    }).replaceWith('<p>' + y + '</p>'); // This works as intended
    $('.tooltip p').text('some new text here'); // This however, fires wiether #element p == x or not
});

HTML

<div id="element-container">
  <div id="element"><p>Text</p></div>
  <button id="button1">button</button>
  <div class="tooltip"><p>Some text</p></div>
</div>
4

3 に答える 3

2 
var x = 'a string';
var y = 'a different string';

$('#element-container').on('click', '#button1', function (){
    var elems = $('#element p').filter(function() {
        return $(this).html() == x;
    });

    if (elems.length) {  // check if any elements matched
        elems.replaceWith( $('<p />', {text: y}) );
        $('.tooltip p').text('some new text here');
    }
});
于 2013-09-06T17:03:24.480 に答える
1

条件付きであると予想される行に別のセレクターを使用しています。その行を実行するには、条件を追加する必要があります。それ以外の場合は、この時点で何があっても手続き的に実行されます。

私が考えることができる1つの方法は、チェーンを継続して、必要な条件に変えることです。

var x = 'a string';
var y = 'a different string';
$('#element-container').on('click', '#button1', function (){
    if(
        $('#element p').filter(function() {
            return $(this).html() == x;
        })
        .replaceWith('<p>' + y + '</p>'))
        // The result of size() will give our condition
        .length
    ){
        // Now we run this only if we had results from the filter
        $('.tooltip p').text('some new text here');
    }
});

これは単なる例であり、おそらくクリーンアップされる可能性がありますが、どのように進むべきかについてのアイデアが得られることを願っています.

于 2013-09-06T17:04:09.727 に答える
1

これ：

$('#element-container, #button1').on('click', function (){
    $('#element p').filter(function() {
        return $(this).html() == x;
    }).replaceWith('<p>' + y + '</p>'); // This works as intended
    $('.tooltip p').text('some new text here'); // This however, fires wiether #element p == x or not
});
于 2013-09-06T16:58:06.070 に答える