Question

我有一个项目符号列表，每个列表项都有一个国家/地区的数据属性。我想获取活动列表项的数据属性并使用它做一些事情。现在，我只是想在一条消息中提醒它。但是，我收到的警告消息显示[object Object]。

这是HTML列表：

<ul class="country_list">
 <li class="country_name france" data-country="fr">&nbsp;</li>
 <li class="country_name united-states active" data-country="us">&nbsp;</li>
 <li class="country_name china" data-country="cn">&nbsp;</li>
 <li class="country_name spain" data-country="es">&nbsp;</li>
 <li class="country_name italy" data-country="it">&nbsp;</li>
</ul>

这是我到目前为止的javascript：

$(document).ready(function($) {
$("li.country_name").click(function(){
    $(".active").removeClass("active");
    $(this).addClass("active");
    var cc = $(".active").data("country");
    var countryMessage = $("your country is " + cc + "!");
    alert(countryMessage);
});
});

我是Javascript和jQuery的新手，并且一直在尝试对此进行排序，但没有任何效果。有人可以帮助我指出正确的方向吗？

Answer 1

尝试使用

var cc = $(".active").attr("date-country");

你甚至可以

var cc = $(this).attr("date-country");

Answer 2

我刚刚修改了codepen中的代码。另请查看评论：D

$(function(){ 
    // this function will execute when document.ready
    var $li = $("li.country_name").click(function(){
        $li.removeClass("active") // you can cache all li items, it's not necessarily query all the time
        var cc = $(this).addClass("active").data("country");
        alert("your country is " + cc + "!");
    });
});

Answer 3

请尝试：在此演示JSFiddle

    var $ul=$('.country_list'),
        cssClassActive='active',

        // show message
        showMsg=function(country){
          var countryMessage='your country is'+country;
          alert(countryMessage);
        },

        // handler
        handler=function(){
          var $this=$(this);
          if($this.hasClass(cssClassActive)){
              $this.removeClass(cssClassActive);
          }
          $this.addClass(cssClassActive);
          showMsg($this.data('country'));
       };

   // delegate event
   $ul.delegate('li','click',handler);

Answer 4

使用此：

use .attr('data-country') instead of data('country')

无法捕获数据属性

4 个答案: