[英]Checking to make sure the same item can't be clicked twice in a row with jQuery / jScript
[英]How can I make sure that same user shouldn't be added twice in jquery?
我正在使用两个div。 在第一个div中,所有用户都显示在页面上,带有“ ADD”按钮选项。 通过添加用户,他们将使用jQuery添加到第二个div。 但是我想确保它们不会被添加两次。 我要实现一个条件,以检查是否已添加用户,然后不应该添加用户或禁用按钮。 我在下面编写我的代码,并在wordpress中使用,但是问题与jquery-
<?php
/*
Template Name: Users
*/
?>
<style>
.container{
width: 800px;
}
.left{
float:left;
width: 300px;
background: ##66CDAA;
border-right: thick-solid #fff;
}
.right{
overflow: hidden;
width: 500px;
background: powderblue;
}
</style>
<?php
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="container">
<div class="left" id="xyz">
<table>
<tr>
<th>Name</th>
<th>Gravatar Image</th>
<th>Add to Div</th>
</tr>
<?php
$sql ="SELECT * FROM wp_users";
$results = $wpdb->get_results($sql) or die(mysql_error());
foreach( $results as $result ){ ?>
<tr>
<td id="<?php echo $result->ID; ?>">
<?php echo $result->display_name; ?>
</td>
<td>
<?php echo get_avatar( $result->user_email, 42); ?>
</td>
<td>
<input type="button" class="submit" data-id="<?php echo $result->ID; ?>" data-name="<?php echo $result->display_name; ?>" data-image="<?php echo get_avatar_url($result->user_email); ?>" value="ADD"><p style="display:none;">Added</p>
</td>
</tr>
<?php
}
?>
</table>
</div>
<div class="right">
<p>Added Users</p>
<table class="table">
<tr>
<th>Name<th>
<th>Image</th>
</tr>
</table>
</div>
</div>
</main>
</div>
<?php get_footer(); ?>
在我的ajax.js文件中,我将用户添加到第二个div,也有一个取消按钮来取消,但是从第二个div取消用户后,我们应该又可以将用户添加到第二个div。
(function($) {
$(document).ready(function() {
$(".submit").on("click", function(e){
e.preventDefault();
var id = $(this).data('id');
var name = $(this).data('name');
var image = $(this).data('image');
//Here I want to check the condition that if a user is already added then it should not be added.
$('.table').append('<tr id=" ' + id+ ' "><td>' + name + '</td><br><td><img src=" ' + image + ' "></td><td><input type="button" value="Cancel" class="cancel"></td></tr>');
})
})
})(jQuery);
因此,我的问题是如何确定用户是否已经添加,然后再也不应该添加。 为此,我该如何检查。 并且,如果添加的用户被取消,则取消按钮分配器和添加按钮将出现在第一格中。 如果现在有用户,如何隐藏表。 就我而言,我尝试过,但是没有用。
编辑:在functions.php中,我已使用以下代码将其加入ajax.js文件。
<?php
function umar_scripts(){
wp_enqueue_script( 'main_ajax', get_template_directory_uri() . '/js/ajax.js', array('jquery'), '', true);
}
add_action( 'wp_enqueue_scripts', 'umar_scripts' );
假设您要向表中的每个用户行添加唯一ID,则可以添加检查表中是否存在具有该ID的行。 使用以下代码:
(function($) {
$(document).ready(function() {
$(".submit").on("click", function(e) {
e.preventDefault();
var id = $(this).data('id');
var name = $(this).data('name');
var image = $(this).data('image');
if ($('table').find('#' + id).length <= 0) {
{
$('.table').append('<tr id=" ' + id + ' "><td>' + name + '</td><br><td><img src=" ' + image + ' "></td><td><input type="button" value="Cancel" class="cancel"></td></tr>');
}
})
})
})(jQuery);
这是检查用户是否存在的方法:
if($('.table td#' + id).length) { // user exists }
else { // user doesn't exist }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.