Javascript if else with jQuery答案

【问题标题】：Javascript if else with jQueryJavascript if else with jQuery
【发布时间】：2023-03-29 20:13:02
【问题描述】：

当我单击图像时，我试图确定图像源是否包含字符串。图像具有 .swap-color 类。我将变量 $current_swatch 设置为图像 src 属性，并且测试成功。我的代码如下。无论我单击什么图像，我都会收到“包含 TB”的警报，即使图像 src 中没有 TB。我做错了什么？

<img src="/images/Swatch-TB.jpg" class="swap-color"/>

$("document").ready(function () {
    $('.swap-color').click(function () {
        //get the image src
        var $current_swatch = $(this).attr('src');
        //check if TB is in the src
        if ($('$current_swatch:contains("TB")').length > 0 ) {
            alert ('Contains TB');
        } else {
            alert ('Does not contain TB');
        }
    });
});

【问题讨论】：

在 Javascript 中，变量不会在字符串中展开，您应该使用连接。
而:contains 不是用于搜索字符串，而是用于搜索 DOM 元素。
为什么投反对票？这是一个完全合理、结构合理的问题？
有些人对任何表明发布者毫无头绪并且没有自己进行任何调试的问题投反对票。就像使用 JS 控制台查看 $('$current_swatch:contains("TB")') 返回的内容一样。
@Barmar - 很高兴再次在这里遇到你，感谢你的辛勤工作！好的cmets，好的编辑。感谢您的洞察力！

标签： javascript jquery

【解决方案1】：

有足够多的反馈，我会不顾一切地发布答案，即使您的问题的关键可以在评论中完成。

检查内容的方法是使用JS原生的indexOf()，而不是你代码中的jQuery选择器方法。

以下是对您的代码的一些注释修订：

// Streamlined, conflict-safe document ready
jQuery(function ($) {
    $('.swap-color').click(function() {
        //get the image src
        var $current_swatch = $(this).attr('src');
        //check if TB is in the src
        // Use JS native "indexOf" rather than jQuery 
        if ($current_swatch.indexOf('TB') > -1 ) {
            alert ('Contains TB');
        } else {
            alert ('Does not contain TB');
        }
    });
});

有关检查子字符串的不同方法的更多信息，请查看此答案：Fastest way to check a string contain another substring in Javascript?

【讨论】：

【解决方案2】：

因此，您正在使用jQuery's contains 方法来检查选择器是否包含值。问题是，$current_swatch 实际上是一个字符串，因为$(this).attr('src') 会给出"/images/Swatch-TB.jpg"。

你想要的是vanilla JS includes.

if ($current_swatch.includes('TB')) {
  ...

【讨论】：

不包括数组吗？不是字符串本身？
@cale_b 根本没有。 Array 和 String 都有 includes 和 indexOf 作为其原型的一部分。看看我链接到的文档——它是针对 String 的。我认为在 OP 的情况下，includes 更清楚，因为 OP 不是在寻找索引，只要该值存在。
@cale_b 更进一步，如果你仔细想想，字符串是作为数组实现的，所以它们有许多相同的方法是有道理的。
是的，同意字符串 == 数组。很高兴了解包括 - 总是学习 SO。谢谢！
@MatthewHerbst 并非如此，因为数组方法查找单个元素，而字符串方法查找子字符串。