Question

我的html页面上有两个图像，我有一个名为MOVE的按钮可以单独移动它们。为了移动它们，我有一个带有选定类的Jquery函数。我有两个输入字段，每个字段都属于特定图像。我的按钮有一个点击计数器功能，所以我需要通过单击两个图像的相同按钮分别进入这两个输入字段来计数。

我认为当我选择图像1时，也应选择输入1，然后计数器将计算图像1的移动计数，当我选择图像2时，也应选择输入2，然后计数器将计算图像2的移动计数。

我不知道如何通过单击一个元素来选择多个元素。请帮忙

我的Jquery功能

$(document).ready(function() {

$(".plan1").click(function() {                              //medium move
    // unselect others
    $(".plan1").removeClass("selected");
    // reselect this one
    $(this).addClass("selected");
});

$("#b1").click(function() {
    // animate selected
    $(".plan1.selected").animate({left:'+=20px'});
    $('#f1.selected').val(function(i, val) { return +val+1 });
});
});

HTML

<img src="imagesource" class="plan1" />
<img src="imagesource" class="plan1" />

<input type="text" id="f1" />
<input type="text" id="f2" />

<button id="b1">MOVE</button>

Answer 1

这可能会让你开始。

jsFiddle Demo

$('#f1, #f2').val('0');

$(".plan1").click(function() {
	$(".plan1").removeClass("selected");
	$(this).addClass("selected");
});

$("#b1").click(function() {
    if ( $(".plan1.selected").length == 0 ) {
      alert("Pick a pic");
      return false;
    }
	var inpID = $(".plan1.selected").attr('id').slice(-1);
	var cnt = $('#f'+inpID).val();
	cnt++;
	$('#f'+inpID).val(cnt);

	$(".plan1.selected, #f"+inpID).animate({'left' : '+=50px' });
    $(".plan1.selected").removeClass("selected");
});

* {position:relative;} /*  Critical! Allows elements to move  */
img, input{display:block;max-width:80px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="pic1" src="http://lorempixel.com/80/80" class="plan1" />
<img id="pic2" src="http://lorempixel.com/80/80/animals" class="plan1" />

<input type="text" id="f1" />
<input type="text" id="f2" />

<button id="b1">MOVE</button>

注意：

（1）在CSS中，您必须先制作元素position:relative，因为默认情况下（position:static）无法使用left或right

进行样式设置

（2）在CSS中，还必须将内联元素img和input放入块元素中，因为内联元素不能左/右动画

通过单击Jquery中的一个元素来选择多个html元素

1 个答案: