javascript - 针对两个元素的点击过滤器

Question

我有一个 jquery 事件，它在单击某个按钮时触发，然后检查某个容器段落的值是否正好等于预定义变量。如果为真，我希望它用我定义的不同变量替换段落，并更改完全不同元素的文本。

不过目前，即使该段落不等于值(在本例中为 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>

Answer 1

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');
    }
});