Jquery选择图像

主要是，我是新的Jquery。Jquery选择图像

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

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

enter image description here

我怎样才能做到这一点？

来源

2012-04-16 Mert METİN

你的意思是：


$.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-16 07:42:00

是的，这将使图像接壤，我想要的是选定的图像将作为数组发送。我怎样才能做到这一点？ – 2012-04-16 07:43:21

只是一个建议，如果再次点击图片时边框会变得不错 – 2012-04-16 07:46:57

看到编辑好的代码，应该可以工作，但是使用class对你来说是更好的解决方案 – 2012-04-16 07:55:31

给他们所有的类：

<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-16 07:46:02 WolvDev

一个简单的例子：

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

来源

2012-04-16 07:50:44 balexandre

第一添加一个类用于选择，然后将项目添加到阵列有“选择图像”级而形式发布

$(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-16 07:55:35 Yorgo

您是否介意在英文中翻译那么一点点的文字我们的质量检验员不会发疯？ – rene 2014-11-19 20:54:57

很简单，只需在点击图片上添加一个新的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：它会删除，如果它存在。）

来源

2012-04-16 08:05:43

Jquery选择图像

回答

相关问题