jQuery选择器属性值空格问题

Question

A couple weeks ago, i've been using this code to make the scroll event into a specific page, and was working very good.

But, yesterday, the client asked to change de attribute name from "Ouro" to "Ouro Envelhecido".

The first functional code was like that:

jQuery(document).ready(function($) {
    $("[data-title=Ouro]").click(function() {
        $('html, body').animate({
            scrollTop: $(".custom-product-page").offset().top - 100
        }, 1000);
    })

And after the attribute name change, we just added the " Envelhecido", like this:

jQuery(document).ready(function($) {
    $("[data-title=Ouro Envelhecido]").click(function() {
        $('html, body').animate({
            scrollTop: $(".custom-product-page").offset().top - 100
        }, 1000);
    }) 

And the code stop working. At the console, I got the warning saying Uncaught Error: Syntax error, unrecognized expression: [data-title=Ouro Envelhecido], but, the attribute name is 100% correct.

imgs: https://prnt.sc/13py6mv https://prnt.sc/13py8zy

Any help would be appreciated!

Answer 1

You should use quotes to wrap your data-title value

jQuery(document).ready(function($) {
    $("[data-title='Ouro Envelhecido']").click(function() {
        $('html, body').animate({
            scrollTop: $(".custom-product-page").offset().top - 100
        }, 1000);
    }) 
})