Question

主要是，我是Jquery的新手。

我有这样的图像。我想要的是，当用户点击图像时，它会使图像边界化。用户可以选择多个图像。选中时必须全部接壤。单击按钮后，我将有图像ID。

  <tr><img id="i will put value for db processing"src="urlofimage"</tr> &nbsp;

enter image description here

我该怎么做？

Answer 1

你的意思是：


$.fn.hasBorder = function() {   
  if ((this.outerWidth() - this.innerWidth() > 0) ||  (this.outerHeight() - this.innerHeight() > 0)){
        return true;
    }
    else{
        return false;
    }
};
$(document).ready(function() {
  var selectedImgsArr = [];
   $("img").click(function() {

      if($(this).hasBorder()) {
          $(this).css("border", "");
          //you can remove the id from array if you need to
      }
      else {
         $(this).css("border", "1 px solid red");
         selectedImgsArr.push($(this).attr("id")); //something like this 
      }
   });
});

Answer 2

一个简单的例子：

live example in JsBin

造型：

ul { list-style: none; }
ul li { display: inline; } 
ul li img { border: 2px solid white; cursor: pointer; }
ul li img:hover,
ul li img.hover { border: 2px solid black; }

javascript：

$(function() {

  $("img").click(function() {      
    $(this).toggleClass("hover");      
  });

  $("#btn").click(function() {      
    var imgs = $("img.hover").length;    
    alert('there are ' + imgs + ' images selected');        
  });

});

结果：

enter image description here

Answer 3

很简单，只需在点击时为图像添加一个新的CSS类。

<html>
...
<td><img class='galImages' src='urlofimage' /></td>
...
</html>

<script>
$document.ready(function() {
    $('img.galImages').click(function() {
        if($(this).hasClass('selected')) {
            $(this).removeClass('selected');
        }
        else {  
            $(this).addClass('selected');
        }
    });
});
</script>

<style>
.selected {
    1px solid #f00;
}
</style>

我更喜欢这种方法用于脚本样式定义，只是为了简单地从功能中删除样式元素。使所有东西都可以重复使用，如果需要可以在以后轻松更改。上面的代码支持应用格式化并在次要点击时删除它。（IE：如果它存在，它将删除。）

Answer 4

给他们所有的课程：

<tr><img class="clickable" id="i will put value for db processing" src="urlofimage" /></tr>

<script>
    $(document).ready(function() { 
        var clickedarray = new Array();
        $('.clickable').click(function() {
            //add border
            $(this).css({border: '1px solid #000'});
            //store in array
            clickedarray.push($(this).attr('id'));
        });
    });
</script>

Answer 5

首先为选择添加一个类，然后在发布表单时将项添加到具有“selected-image”类的数组

$(document).ready(function() {
  var selectedImgsArr = new Array();
   $("img").click(function() {

      if($(this).hasClass("selected-image"))
           $(this).removeClass("selected-image");
      else
           $(this).addClass("selected-image");
   });
   $("form").submit(function(){
       selectedImgsArr.push($(".selected-image").attr("src"));
   })
});

Jquery选择图像

5 个答案: