Jquery Selecting image

前端未结

关注

 5  1018

primarily, i\'m new for Jquery.

I have images like that . What i want is that when user click image,it makes image bordered. User can select a number of images. It

相关标签:

5条回答

别那么骄傲

2021-01-07 06:22
Easy enough, just add a new CSS class to the image on click.
```
<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>
```
I prefer this method to in-script style definitions for the sake of simply removing stylistic elements from functionality. Makes everything reusable and easy to change later if need be. Above code supports both applying the formatting and removing it on a secondary click. (IE: It will remove if it exists.)
0 讨论(0)
发布评论:

提交评论
- 加载中...

一生所求

2021-01-07 06:27

first add a class for selections and then add items to array which have 'selected-image' class while form posted

$(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"));
   })
});

0 讨论(0)

-上瘾入骨i

2021-01-07 06:33

give them all a class:

<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>

0 讨论(0)

广开言路

2021-01-07 06:40

a simple example:

live example in JsBin

the styling:

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

the javascript:

$(function() {

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

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

});

the result:

enter image description here

0 讨论(0)

孤独总比滥情好

2021-01-07 06:42

Do you mean:


$.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 
      }
   });
});

0 讨论(0)