Question

以下是我的下拉列表。

<ul id="navBar" data-value="">
        <li data-city-value="blore"><a href="#">Bangalore</a>
            <ul>
                <li data-city-value="delhi"><a href="#">Delhi</a></li>
                <li data-city-value="che"><a href="#">Chennai</a></li>
                <li data-city-value="jaipur"><a href="#">Jaipur</a></li>
                <li data-city-value="hyd"><a href="#">Hyderabad</a></li>
                <li data-city-value="mum"><a href="#">Mumbai</a></li>
                <li data-city-value="pune"><a href="#">Pune</a></li>
            </ul>
        </li>
    </ul>

以下是我尝试访问data-city-value属性的方法。

方法1）

var cityName = document.getElementById('navBar');
var city = cityName.getAttribute('data-city-value');
alert(city);

它警告＆＃34; null＆＃34;

方法2）

var cityName = document.getElementById('navBar');
var city = cityName.dataset.cityValue;
alert(city);

警报＆＃34; undefined＆＃34;。

方法3）

$('#navBar li').click(function() {
    $(this).parent().data('value', $(this).data('cityValue')); 
  });
  alert($('#city').data('value'));

警报＆＃34; undefined＆＃34;。

我检查了语法以获取数据值here

如果你能帮助我找到我在做错的地方，那将是非常有帮助的。

感谢。：）

Answer 1

在前两种方法中，您定位标识ul的顶部navBar。在第三种方法中，您执行$(this).parent()，再次转到ul元素。

该元素没有data-city-value属性。

jquery方法应该是

$('#navBar').on('click','li', function(e) {
    var city = $(this).data('city-value');
    alert(city);
    return false;
});

http://jsfiddle.net/gaby/Mb7KS/

演示

Answer 2

这是您遍历数据 - 城市价值属性的方法：

 $('li[data-city-value]').each(function(index,element){
        alert($(element).data('city-value'));
 });

您还可以查看我的jsFiddle示例。

对于点击事件：

$(document).ready(function()
{

    $('li').click(function() {
        alert($(this).data('city-value'));
        return false;
    });
});

你应该返回false，因为top li元素有内部元素，它触发了内部li元素点击事件。

我的第二个jsFiddle演示。

Answer 3

正如Gaby所指出的，您需要先到达

元素。试试这个：

$('#navBar:first-child')

无法获得<li data - * =“”>元素的值。尝试过Javascript以及Jquery </li>

3 个答案: