Question

我使用不同的按钮执行不同的任务，但是他们的代码是相同的，唯一改变的是变量。

现在，我为每个按钮提供了不同的代码块。我想要的是为每个按钮使用相同的代码。

这是一个使帖子最喜欢的按钮（使用上面的代码）

<form method="post">
  <input type="submit" id="favorite-button" data-is-term="false" name="favorite-post-<?php echo $postid ?>" data-post-id="<?php echo $post->ID ?>" value="<?php make_post_favorite($post->ID); ?>"/>
</form>

我最喜欢的按钮的jQuery代码：

jQuery('#content').on('click', '#favorite-button', function(event) {
    event.preventDefault(); 
    if (jQuery(this).val() == "Favorite") {
        jQuery(this).val("Unfavorite");
    } else {
        jQuery(this).val("Favorite");
    }
    var postID = null;
    //var userID = null;

    postID = jQuery(this).attr('data-post-id');
    //userID = jQuery(this).attr('data-user-id');
    var data = {
        action: 'make_post_favorite_response',
        post_ID: postID         
    };
    jQuery.ajax({
        type: "post",
        url: followsys_vars.ajaxUrl,
        dataType:"json",
        data: {
            'action' : 'make_post_favorite_response',
            'post_ID' : postID},
        success: function(message) {
            jQuery(this).val(message);
                }
    }); 

});

这是一个关注'某事'的按钮

<form method="post">
  <input type="submit" id="follow-button" data-is-term="false" name="follow-user-<?php echo $author_id ?>" data-user-id="<?php echo $author_id ?>" value="<?php follow_user($author_id); ?>"/>
</form>

以下按钮的jQuery代码

jQuery('#content').on('click', '#follow-button', function(event) { //Using .on will attach the evnt to appended items.

    event.preventDefault(); //This Cancels a link's default action (stops auto top)

    if (jQuery(this).val() == "Follow") {
        jQuery(this).val("Unfollow");
    } else {
        jQuery(this).val("Follow");
    }

    var userId = null;
    var term = null;
    userId = jQuery(this).attr('data-user-id');
    term = jQuery(this).attr('data-is-term');
    var data = {
        action: 'follow_user_response',
        author_id: userId,
        isTerm: term            
    };      
    jQuery.ajax({
            type: "post",
            url: followsys_vars.ajaxUrl,
            dataType:"json",
            data: {
                'action' : 'follow_user_response',
                'author_id' : userId,
                'isTerm' : term},
            success: function(message) {
                jQuery('.user-followers .author-id-' + userId).text(message.followers);
                jQuery('.user-following .author-id-' + message.currentUserId).text(message.following);


            }
        });

});

Answer 1

使用包含两个按钮代码中所有差异的多维数组。类似的东西：

var myVar = [
['favorite-button', 'Favorite', 'Unfavorite', etc],
['follow-button', 'Follow', 'Unfollow', etc]
];

然后使用$ .each并用适当的数组替换必要的区域：

$.each(myVar, function(i) {

    jQuery('#content').on('click', '#' + myVar[i][0]', function(event) { 

        event.preventDefault(); //This Cancels a link's default action (stops auto top)

        if (jQuery(this).val() == myVar[i][1]) {
            jQuery(this).val(myVar[i][2]);
        } else {
            jQuery(this).val(myVar[i][1]);
        }
etc...

Answer 2

您可以将绑定到各个按钮的事件侦听器组合到绑定到表单的单个事件侦听器，或绑定到div的div 你的表格。在听众内部，你基本上会检查它的类型单击的元素并将事件委托给函数为特定类型的元素编写。

例如

function handleButton(event) {
    var postID = jQuery(event.target).attr('data-post-id');
    var response = {};
    if (event.target.id == 'favorite-button') {
        response = addFavorite(postID);
    } else if (event.targe.id == 'follow-button') {
        response = followPost(postID);
    } else {
        // add some default action?
    }
    return response;
}
// #content is a bounding element containing all your buttons
jQuery('#content').click(function(event) {
    event.preventDefault();
    switch(event.target.nodeName) {
    case "BUTTON":
        handleButton(event);
        break;
    default:
        handleOtherEls(event);
    }
});

这样做的好处是只向DOM添加一个事件监听器。您对addFavorite和followPost的实现可能会共享大量代码，您可以将它们放在一个单独的函数中。

Answer 3

为什么不切换到基于类的选择器而不是ID选择器。如果按钮的类别为follow-button：

<input type="submit" class="follow-button" data-is-term="false" name="follow-user-<?php echo $author_id ?>" data-user-id="<?php echo $author_id ?>" value="<?php follow_user($author_id); ?>"/>

然后可以在该类的每个按钮上调用jQuery .. jQuery(this)将始终引用已单击的特定按钮。

jQuery('#content').on('click', '.favorite-button', function(event) {
    event.preventDefault(); 
    if (jQuery(this).val() == "Favorite") {
        jQuery(this).val("Unfavorite");
    } else {
        jQuery(this).val("Favorite");
    }
    var postID = null;
    //var userID = null;

    postID = jQuery(this).attr('data-post-id');
    //userID = jQuery(this).attr('data-user-id');
    var data = {
        action: 'make_post_favorite_response',
        post_ID: postID         
    };
    jQuery.ajax({
        type: "post",
        url: followsys_vars.ajaxUrl,
        dataType:"json",
        data: {
            'action' : 'make_post_favorite_response',
            'post_ID' : postID},
        success: function(message) {
            jQuery(this).val(message);
                }
    }); 

});

Answer 4

由于您在两个调用中都有不同的情况和条件，因此您可以创建一个通用函数（编写为do_request）来生成Ajax请求，并且可以在两个事件处理程序中使用。

var do_request = function(data, success_callback){
  jQuery.ajax({
    type: "POST",
    url: "followsys_vars.ajaxUrl",
    dataType:"json",
    data: data,
    success: success_callback
  });
}

jQuery('#content').on('click', '#favorite-button', function(event) {
  event.preventDefault();
  if (jQuery(this).val() == "Favorite") {
    jQuery(this).val("Unfavorite");
  } else {
    jQuery(this).val("Favorite");
  }
  var postID = jQuery(this).attr('data-post-id'),
      data = {
        action: 'make_post_favorite_response',
        post_ID: postID
      };
  do_request(data, function(message) {
    jQuery(this).val(message);
  });
});

jQuery('#content').on('click', '#follow-button', function(event) {
  event.preventDefault();
  if (jQuery(this).val() == "Follow") {
    jQuery(this).val("Unfollow");
  } else {
    jQuery(this).val("Follow");
  }
  var userId = jQuery(this).attr('data-user-id'),
      term = jQuery(this).attr('data-is-term'),
      data = {
        action: 'follow_user_response',
        author_id: userId,
        isTerm: term
      };
  do_request(data, function(message) {
    jQuery('.user-followers .author-id-' + userId).text(message.followers);
    jQuery('.user-following .author-id-' + message.currentUserId).text(message.following);
  });
});

如何重用html按钮的jQuery代码？

4 个答案: