如何获取点击元素的ID并存储在变量中，并在使AJAX调用的函数中使用它

问题描述：

我一直试图从下面的一次点击函数中删除这个#static id，并使用变量自动获取像'#static，#dynamic ...等等，并把它放在一键功能。这将通过改变它的ID名称来节省我一次又一次的复制和粘贴相同的功能。此外，这也将使代码看起来很简洁&。如何获取点击元素的ID并存储在变量中，并在使AJAX调用的函数中使用它

jQuery(document).ready(function($){ 
// Home Page Static Portfolio Ajax Query 
$(this).one('click', '#static', function(e){ 
    var that = $(this); 
    var id = that.attr('id'); 
    var rel = that.data('rel'); 
    var ajaxurl = that.data('url'); 
    $.ajax({ 
     url : ajaxurl, 
     type : 'POST', 
     data : { 
      rel : rel, 
      action : 'home_filter_' + id + '_portfolios' 
     }, 
     error : function(response){ 
      console.log(response); 
     }, 
     success : function (response){ 
      if (response == '') { 
       $('figure' + id).after('<div class="end_of_testimonial"><h3>You have reached the end of the line</h3><p>No more portfolios to load!</p></div>'); 
      } else { 
       $('.gallery-wrapper').append(response); 
      } 
     } 
    }); 
});

任何帮助，将不胜感激:)

如果这不只是使用'。对（）'，而不是'。一（）'...请编辑您的问题。你的问题可以更好地定义。你期望的*帮助*是什么？ –

答

$(this).one('click', '#static', function(e)

在这行代码中，你应该使用类作为元素的标识符。 “id”是唯一的，它应该只分配给一个元素。

$(body).one('click', '.yourclass', function(e)

并将该类添加到所需的所有元素。

对不起，最后的代码是 $（body）.one（'click'，'.yourclass'，function（e） – mohsinhassan155

改进你的回答：https：//stackoverflow.com/posts/47487841/edit。 –

不会因为使用'one（）'单击任何一个类将会阻止代码在该类的其他元素上运行 – charlietfl

答

您可以将常用的类添加到所有你想这再次为更换工作，并使用正on()

添加其他类已被点击时一个这样你就不会做出请求one()元素功能

$(function() { 
 
    // better to use `document` instead of `this` for readability 
 
    $(document).on('click', '.my-div', function(e) { 
 
    var that = $(this); 
 
    if (that.hasClass('already-clicked')) { 
 
     // bail out 
 
     console.log('Already clicked') 
 
     return 
 
    } else { 
 
     that.addClass('already-clicked'); 
 
     var data = that.data(); 
 
     data.id = this.id; 
 
     console.log(JSON.stringify(data)) 
 
     // do your ajax 
 
    } 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="my-div" id="1" data-rel="rel_1" data-url="url_1">Div one</div> 
 
<div class="my-div" id="2" data-rel="rel_2" data-url="url_2">Div two</div> 
 
<div class="my-div" id="3" data-rel="rel_3" data-url="url_3">Div two</div>

答

您可以使用类并调用这种方式AJAX功能。这里是你的演示代码。你可以使用尽可能多的id作为你想要的这个功能。我使用事件文档来调用该类的每个实例。 Fiddel link

jQuery(document).ready(function($){ 
    // Home Page Static Portfolio Ajax Query 
    $(document).on('click', '.clickclass', function(e){ 
     var that = $(this); 
     var id = that.attr('id'); 
     var rel = that.data('rel'); 
     var ajaxurl = that.data('url'); 
      alert(id); 

    }); 
    });

如何获取点击元素的ID并存储在变量中，并在使AJAX调用的函数中使用它

相关推荐