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

Answer 2

这个：

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

Answer 3

您正在为您希望处于条件中的行使用单独的选择器。您将需要添加一个条件来执行该行。否则，无论此时如何，它都会按程序运行。

我能想到的一种方法是继续链条并将其变成您需要的条件。

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

这只是一个示例，可能会被清理，但我希望它能让您了解它应该如何进行。