Question

我有一个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>

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

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

点击过滤器定位两个元素

3 个答案: