Javascript if else with jQuery

Question

I am trying to determine if an image source contains a string when I click on the image. The images have the class .swap-color. I have the variable $current_swatch set to the image src attribute, and it tests successfully. My code is below. No matter what image I click on, I get the alert "Contains TB", even if TB isn't in the image src. What am I doing wrong?

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

Variables aren't expanded inside strings in Javascript, you should use concatenation. — Barmar
– Barmar, Commented Feb 11, 2016 at 2:45
And :contains isn't for searching strings, it's for searching DOM elements. — Barmar
– Barmar, Commented Feb 11, 2016 at 2:46
Why the downvotes? This is a perfectly reasonable, well-constructed question? — random_user_name
– random_user_name, Commented Feb 11, 2016 at 2:48
Some people downvote any question that indicates the poster is clueless and hasn't done any debugging on their own. Like use the JS console to see what $('$current_swatch:contains("TB")') returns. — Barmar
– Barmar, Commented Feb 11, 2016 at 2:50
@Barmar - Well, it's nice to bump into you again here on SO, and thank you for all your hard work! Good comments, good editing. Thanks for the insight! — random_user_name
– random_user_name, Commented Feb 11, 2016 at 2:52

Community · Accepted Answer · 2017-05-23 11:50:43Z

4

There's enough feedback that I'm going to go out on a limb and post an answer, even though the key to your question could be done in a comment.

The way to check for the contents is to use the JS native indexOf(), rather than the jQuery selector method in your code.

Here's some commented revisions to your code:

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

For more information on different ways to check for a substring, check out this answer: Fastest way to check a string contain another substring in Javascript?

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Feb 11, 2016 at 2:45

random_user_name

26.3k7 gold badges81 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Barmar · Accepted Answer · 2016-02-11 02:47:20Z

1

So, you're using the jQuery's contains method which checks if a selector contains a value. The problem is, $current_swatch is actually a string, since $(this).attr('src') will give "/images/Swatch-TB.jpg".

Instead what you want is the vanilla JS includes.

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

edited Feb 11, 2016 at 2:47

Barmar

789k57 gold badges554 silver badges669 bronze badges

answered Feb 11, 2016 at 2:46

Matthew Herbst

32.3k27 gold badges92 silver badges141 bronze badges

11 Comments

random_user_name Over a year ago

Isn't includes for arrays? Not strings per-se?

Matthew Herbst Over a year ago

@cale_b not at all. Array and String both have includes and indexOf as part of their prototypes. Look at the doc I linked to - it's for String. I would argue in OP's case includes is more clear since OP isn't looking for the index, just if the value exists.

Matthew Herbst Over a year ago

@cale_b to go further, if you really think about it, strings are implemented as arrays, so it makes sense that they would have many of the same methods.

random_user_name Over a year ago

Yes, agreed on strings == arrays. And nice to learn about includes - always learning on SO. Thanks!

Barmar Over a year ago

@MatthewHerbst Not really, since the array methods look for individual elements, while the string methods look for substrings.

|

Collectives™ on Stack Overflow

Javascript if else with jQuery

2 Answers 2

Comments

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related