Question

我很少<div>是动态的。点击这些<div>后，我想触发jQuery ui switchClass方法，该方法会将另一个元素的类从col-sm-12更改为col-sm-9。

请找到以下代码：

HTML

 <div class="target" data-id="1">Item 1</div>
 <div class="target" data-id="2">Item 2</div>
 <div class="target" data-id="3">Item 3</div>
 <div class="target" data-id="4">Item 4</div>

JS：

$('.target').click(function(){

    $('#itemList').switchClass( "col-sm-12", "col-sm-9", 800, slideItems);

     function slideItems(){
      //I WANT TO GET DATA-ID here, exactly here
     }
});

切换类后，我想执行slideItems函数并访问其中的被点击元素data-id。例如slideItems($this)，我不知道如何将当前点击的项目传递给我的函数。

Answer 1

您可以使用bind()方法更改回调函数的上下文。在回调中，您可以使用data()方法来检索数据属性。：

 $(document).on("click", '.target', function() {
  $('#itemList').switchClass("col-sm-12", "col-sm-9", 800, slideItems.bind(this));
});

function slideItems() {
  var elmId = $(this).data("id");
  alert(elmId);
}

＆＃13;

$(document).on("click", '.target', function() {
  $('#itemList').switchClass("col-sm-12", "col-sm-9", 800, slideItems.bind(this));
});

function slideItems() {
  var elmId = $(this).data("id");
  alert(elmId);
}

＆＃13;

target {}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div class="target" data-id="1">Item 1</div>
<div class="target" data-id="2">Item 2</div>
<div class="target" data-id="3">Item 3</div>
<div class="target" data-id="4">Item 4</div>
<div id="itemList"></div>

＆＃13;

如果要将原始上下文保留在回调中，可以将单击的元素作为参数传递给回调，如下所示：

＆＃13;

$(document).on("click", '.target', function() {
  var itemList = $('#itemList').get(0);
  $(itemList).switchClass("col-sm-12", "col-sm-9", 800, slideItems.bind(itemList, this));
});

function slideItems(target) {
  // this refers to #itemList
  var elmId = $(target).data("id");
  alert(elmId);
}

＆＃13;

target {}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div class="target" data-id="1">Item 1</div>
<div class="target" data-id="2">Item 2</div>
<div class="target" data-id="3">Item 3</div>
<div class="target" data-id="4">Item 4</div>
<div id="itemList"></div>

＆＃13;

Answer 2

您可以使用$(this)传递元素本身。

在我的示例中，代码的工作方式如下：

$(".target").click(function() {
    var target = $(this);
    $('#itemList').switchClass( "col-sm-12", "col-sm-9", 800, "linear", function(){ 
        slideItems( target ); 
    });
});

function slideItems($element){
  var elementtoslide = $element;
  elementtoslide.slideUp();  
}

<强> SEE A FIDDLE OF THIS CODE IN ACTION HERE

希望这有帮助！

jQuery将参数传递给动画完成

2 个答案: