jquery - Jquery選択イメージ

Question

主に、私はJqueryが初めてです。

そんなイメージがあります。私が欲しいのは、ユーザーが画像をクリックすると、画像が縁取りされることです。ユーザーは複数の画像を選択できます。選択すると、すべてが縁取りされている必要があります。ボタンをクリックすると、画像IDが表示されます。

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

ここに画像の説明を入力

これどうやってするの？

score 6 · Accepted Answer

つまり:


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

score 3 · Accepted Answer

簡単な例：

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

});

結果：

ここに画像の説明を入力してください

score 2 · Accepted Answer

簡単で、クリックして画像に新しい 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>

機能からスタイル要素を単純に削除するために、スクリプト内のスタイル定義よりもこの方法を好みます。すべてを再利用可能にし、必要に応じて後で簡単に変更できるようにします。上記のコードは、フォーマットの適用と 2 回目のクリックでの削除の両方をサポートしています。(IE: 存在する場合は削除されます。)

score 1 · Accepted Answer

最初に選択用のクラスを追加してから、フォームの投稿中に「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"));
   })
});

score 1 · Accepted Answer

それらすべてにクラスを与えます：

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

jquery - Jquery選択イメージ

5 に答える 5

Related

Reference