根据其数据属性选择一个DOM元素

Question

I have an HTML structure such as this:

<span class="portfolio-custom-content" data-name="alexa" data-lang="hu">Hungarian text</span>
<span class="portfolio-custom-content" data-name="alexa" data-lang="en">English text</span>
<span class="portfolio-custom-content" data-name="peter" data-lang="hu">Hungarian text</span>
<span class="portfolio-custom-content" data-name="peter" data-lang="en">English text</span>
<span class="portfolio-custom-content" data-name="james" data-lang="hu">Hungarian text</span>
<span class="portfolio-custom-content" data-name="james" data-lang="en">English text</span>

I would like to select the text according to an id and the current language (WPML).

Here's the javascript code I'm using:

window.onhashchange = function () {
    var url = window.location.pathname,
        idk = [];

    // IDs for the current portfolio
    idk = {
        1: 'alexa',
        2: 'peter',
        3: 'james'
    }
    // Checking the current language of the website. If it's in english, german or italian, we need the english text, else we need the hungarian text.
    if (url.indexOf('/en/') > -1 || url.indexOf('/de/') > -1 || url.indexOf('/it/') > -1) {
        // not hungarian language
        var id = parseInt(window.location.hash.split("#")[1]),
            selector = '.portfolio-custom-content[data-name="' + idk[id] + '"]';

        if (!isNaN(id)) {


        }
    } else {
        // hungarian language
    }
}

As you can see, I'm able to select the correct span by it's id, but how do I have to modify the selector, so that I can select the name AND the language?

Answer 1

只需对属性选择加倍：

selector = '.portfolio-custom-content[data-name="' + idk[id] + '"][data-lang="' + langVariable + '"]';