Question

更新 - 您可以查看此here的工作原理。

我试图减少这个jQuery但不知道如何使用以下变量来定位各种子元素。

var country = $('#global-map li');

如上所示，我为#global-map li创建了一个变量。这些列表项中的每一个都有不同的类，我想在每个列中定位子a个元素。

我没有设法做到这一点，并采取了以下措施，但我想知道这样做的正确方法。

    $('#global-map li.map-europe a').click(function(e) {
                e.preventDefault();
                country.removeClass('map-active');
                $(this).parent().addClass('map-active');
                globalSlider.royalSlider('goTo', 0);
            });
            $('#global-map li.map-usa a').click(function(e) {
                e.preventDefault();
                country.removeClass('map-active');
                $(this).parent().addClass('map-active');
                globalSlider.royalSlider('goTo', 1);
            });
... etc

我想我甚至可以为不同的类创建一个数组，以便为每个类编写一次代码，而不是每次都编写代码。像这样：

var mapArr = ["europe", "usa", "china", "australia", "brazil"];

然后使用某种+1的行：

globalSlider.royalSlider('goTo', slide+1);

Answer 1

我会将属性data-target添加到锚点：

这样你就可以拥有像

这样的东西

<a data-target="1">

或

<a data-target="china">

然后

$('#global-map li.map-europe a').click(function(e){
    globalSlider.royalSlider('goTo', $(this).attr('data-target'));
})

Answer 2

我会做什么：

$('#global-map li a').click
(
    function(e)
    {
        e.preventDefault();
        country.removeClass('map-active');//BTW Where is country instanciate?
        switch($(this).parent().attr('class'))
        {
            case 'map-europe':
                globalSlider.royalSlider('goTo', 0);
            break;
            case 'map-usa':
                globalSlider.royalSlider('goTo', 1);
            break;
        }
        $(this).parent().addClass('map-active');
    }
);

使用不同的类定位jQuery变量

2 个答案: