Question

我正在尝试从数据属性中获取值，但其值仍会显示以前的值。这是我的代码

<ul class="sort-by">
                                                    <li class="sort active up change_view" data-list_view="list_view"  data-sort="tour_name"  ><a href="javascript:void(0);">Name <i class="fa fa-long-arrow-down"></i></a></li>
                                                    <li class="sort change_view" data-list_view="list_view" data-sort="tour_price"><a href="javascript:void(0);">Price <i></i></a></li>
                                                    <li class="sort change_view" data-list_view="list_view" data-sort="location"><a href="javascript:void(0);">Location <i></i></a></li>
                                                    <li class="sort change_view" data-list_view="list_view" data-sort="star_rate"><a href="javascript:void(0);">Start Rating <i></i></a></li>
                                                </ul>
<div class="sorting-middle-holder">
                                                <a href="javascript:void(0);" data-page_list="<?php echo $this->uri->segment(4); ?>" data-list="<?php echo $destination->id ?>" data-list_view="list_view"  class="btn btn-sorting active list btn_list"><i  class="fa fa-th-list"></i></a>
                                                <a href="javascript:void(0);" data-page_grid="<?php echo $this->uri->segment(4); ?>" data-grid="<?php echo $destination->id ?>"  data-grid_view="grid_view" class="btn btn-sorting grids btn_grid"><i  class="fa fa-th-large"></i></a>
                                            </div>

这是我的

$('.btn_list').click(function(){
        $('.change_view').attr('data-list_view','list_view');
        $('.change_view').attr('data-grid_view',null);

    });
$('.btn_grid').click(function(){
        $('.change_view').attr('data-grid_view','gird_view');
        $('.change_view').attr('data-list_view',null);

    });

Answer 1

使用此代码

$('.btn_list').click(function(){
    $('.change_view').each(function(){
        $(this).data('list_view','list_view');
        $(this).data('grid_view',null);
    });
});
$('.btn_grid').click(function(){
    $('.change_view').each(function(){
        $(this).data('list_view',null);
        $(this).data('grid_view','grid_view');
    });
});

并写这样的HTML

<ul class="sort-by">
    <li class="sort active up change_view" data-list_view="list_view" data-grid_view=""  data-sort="tour_name"  ><a href="javascript:void(0);">Name <i class="fa fa-long-arrow-down"></i></a></li>
    <li class="sort change_view" data-list_view="list_view" data-grid_view="" data-sort="tour_price"><a href="javascript:void(0);">Price <i></i></a></li>
    <li class="sort change_view" data-list_view="list_view" data-grid_view="" data-sort="location"><a href="javascript:void(0);">Location <i></i></a></li>
    <li class="sort change_view" data-list_view="list_view" data-grid_view="" data-sort="star_rate"><a href="javascript:void(0);">Start Rating <i></i></a></li>
</ul>
<div class="sorting-middle-holder">
    <a href="javascript:void(0);" data-page_list="<?php echo $this->uri->segment(4); ?>" data-list="<?php echo $destination->id ?>" data-list_view="list_view"  class="btn btn-sorting active list btn_list"><i  class="fa fa-th-list"></i></a>
    <a href="javascript:void(0);" data-page_grid="<?php echo $this->uri->segment(4); ?>" data-grid="<?php echo $destination->id ?>"  data-grid_view="grid_view" class="btn btn-sorting grids btn_grid"><i  class="fa fa-th-large"></i></a>
</div>

如何在值更改时从data属性获取新值

1 个答案: