1

私は現在、調査プロジェクトに取り組んでいます。いくつかの調査で画像の質問を見ました。プロジェクトに実装したいです。だから私はこのように考えました。

これが私のコードです。

<div  id="image1"    onclick="Imagecheckbox(this);">
    <img src="https://www.google.co.in/images/srpr/logo3w.png" alt="Image not found" />
</div>
<div  id="image2"    onclick="Imagecheckbox(this);">
   <img src="https://www.google.co.in/images/srpr/logo3w.png" alt="Image not found" />
</div>
 <div  id="image3"    onclick="Imagecheckbox(this);">
    <img src="https://www.google.co.in/images/srpr/logo3w.png" alt="Image not found" />
</div>

ですから、画像をクリックすると、このようなものが表示されます。 ここに画像の説明を入力してください

だから私は動的にdivを作成し、これに追加しています。しかし、それは機能していません。これが私のコードです。

   function Imagecheckbox(div) {
        var clickeddiv = $('#' + div.id);
        $("<div id='mydiv' style='background:yellow;z-index:1;height:100;width:100;align:right;vertical-align:bottom;etc...'></div>").appendTo($(clickeddiv)); 
    }

これどうやってするの ？ありがとう。

4

3 に答える 3

1

まず第一に、onclick属性の使用を避けてください。すでにページにjQueryを含めている場合は、それを最大限に活用することもできます。

これを実現するには、画像を含む要素と目盛りを含む要素に追加position: relative;する必要があります。divposition: absolutediv

HTML

<div id="images">
    <div>
        <img src="https://www.google.co.in/images/srpr/logo3w.png" alt="Image not found" />
    </div>
    <div>
        <img src="https://www.google.co.in/images/srpr/logo3w.png" alt="Image not found" />
    </div>
    <div>
        <img src="https://www.google.co.in/images/srpr/logo3w.png" alt="Image not found" />
    </div>
</div>

jQuery

var $tick = $("<div />").addClass("tick");
$("#images div").click(function() {
    if ($(this).find(".tick").length) {
        $(this).find(".tick").remove();
    }
    else {
        $(this).append($tick);
    }
});

CSS

#images div {
    position: relative;
}
#images div .tick {
    background-image: url('tick.gif');
    bottom: 0;
    right: 0;
    width: 25px; /* amend as needed */
    height: 25px; /* amend as needed */
    position: absolute;
}
于 2012-05-29T15:01:26.847 に答える
0

これを試して：

function Imagecheckbox(div) {
    var clickeddiv = $('#' + $(div).attr('id'));
    $("<div id='mydiv' style='background:yellow;z-index:1;height:100;width:100;align:right;vertical-align:bottom;etc...'></div>").appendTo($(clickeddiv)); 
}
于 2012-05-29T15:01:02.487 に答える
0

クリックするたびにjQueryを使用して要素を作成および削除する必要はありません。たとえば、疑似要素をスタイリングするのと同じ効果を得ることができます。

HTML

<div id="images">
    <div id="image1">
        <img src="https://www.google.co.in/images/srpr/logo3w.png">
    </div>
    <div id="image2">
        <img src="https://www.google.co.in/images/srpr/logo3w.png">
    </div>
    ...
</div>

jQuery
（toggleClass()親要素のイベント委任とともに、すべてのハンドラーをアタッチすることを回避しますdiv）

$('#images').on('click', 'div', function() {
  $(this).toggleClass('selected');
});

CSS

#images > div.selected {
   position  : relative;
   z-index   : 1;
}

#images > div.selected:after {
   content   : "";
   position  : absolute;
   right     : 0;
   bottom    : 0;
   width     : ...;
   height    : ...;
   background : url(selected-tick.gif) center center no-repeat;   
}

疑似要素は、最新のすべてのブラウザで機能します。IE8+

于 2012-05-29T15:04:38.933 に答える