Question

我一直在尝试从下面的单击功能中删除此#static ID并使用变量，以便它自动获取ID。例如#static，#dynamic ...等，并将其置于单击功能中。这样可以省去复制和粘贴相同功能，只需更改它的ID名称即可。此外，这也将使代码看起来干净整洁短。

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 );
            }
        }
    });
});

任何帮助都将非常感谢:)

Answer 1

你可以使用class并以这种方式调用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);

    });
    });

Answer 2

您可以为要使其处理的所有元素添加公共类，并使用常规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>

Answer 3

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

在代码的这一行中，您应该使用class作为元素的标识符。＆＃34; ID＆＃34;是唯一的，它应该只分配给一个元素。

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

并将该类添加到您想要的所有元素中。

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

3 个答案: