2

主要是，我是 Jquery 的新手。

我有这样的图像。我想要的是当用户单击图像时，它会使图像加边框。用户可以选择多个图像。选择时必须全部加边框。单击按钮后，我将获得图像 ID。

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

在此处输入图像描述

我怎样才能做到这一点？

4

5 回答 5

6

你的意思是：


$.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 
      }
   });
});
于 2012-04-16T07:42:00.910 回答
3

一个简单的例子：

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

});

结果：

在此处输入图像描述

于 2012-04-16T07:50:44.317 回答
2

很简单，只需在点击时为图像添加一个新的 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>

为了简单地从功能中删除风格元素，我更喜欢这种方法而不是脚本中的样式定义。使所有内容都可重复使用，并且在以后需要时易于更改。上面的代码支持在二次点击时应用格式和删除它。（即：如果存在，它将删除。）

于 2012-04-16T08:05:43.103 回答
1

给他们上一堂课：

<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>
于 2012-04-16T07:46:02.877 回答
1

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

$(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"));
   })
});
于 2012-04-16T07:55:35.830 回答