1

私は 3X3 のボックスを持っていますが、現在それを持っているので、正方形のいずれかにカーソルを合わせると背景が青色になり、ボックスの外にカーソルを合わせると空に戻ります。ボックスのいずれかをクリックすると画像が表示されるようにもしています。私が今達成しようとしているのは、ボックスをクリックすると画像が表示され、同じボックスをもう一度クリックすると画像が消えるなど、Jqueryを使用することです。

ここに私が持っているものがあります:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script type="text/javascript">

        $(function () {
            $('.divs').hover(function () {
                $(this).css("background-color", "#0000EE");
                console.log('hover');

            }, function () {
                $(this).css("background-color", "");
                console.log('hoverout');
            });

            $('.divs').click(function () {
                $(this).prepend("<img class='divimg' src=http://upload.wikimedia.org/wikipedia/commons/thumb/0/08/SMirC-cool.svg/320px-SMirC-cool.svg.png>");
                console.log('divclicked');
            });
        });

私のページは現在どのように見えますか

4

4 に答える 4

1

そこにすでに画像があるかどうかを確認してください

var $img = $("img", this);
if ($img.length > 0)
    $img.remove();
else
    $(this).prepend("<img class='divimg' src=http://upload.wikimedia.org/wikipedia/commons/thumb/0/08/SMirC-cool.svg/320px-SMirC-cool.svg.png>");

画像を削除したくない場合は、可視性を切り替えるだけです

var $img = $("img", this);
if ($img.length > 0) {
    $img.toggle();
} else {
    $(this).prepend("<img class='divimg' src=http://upload.wikimedia.org/wikipedia/commons/thumb/0/08/SMirC-cool.svg/320px-SMirC-cool.svg.png>");

}
于 2012-05-10T12:46:35.633 に答える
1

もう 1 つのオプションは、CSS:hover属性を使用することです。

.divs:hover {
    background-color: #0000ee;
}

クリックに関しては、s に画像を追加し、divjQuery の切り替えを使用できます。

HTML:

<div class="divs"><img src="..." alt=""></div>

JavaScript:

$('.divs').click(function () {
    $(this).children("img").toggle();
});
于 2012-05-10T12:47:37.567 に答える
1

jQuery().hide() と jQuery().show() を試しましたか

于 2012-05-10T12:42:58.117 に答える
1

クリック機能で次のコードを試してください

if($('img.divimg').length == 0){
  $('img.divimg').fadeOut(function(){
    $(this).remove()
  });
}else{
  $(this).prepend("<img class='divimg' style='display:none;' src=http://upload.wikimedia.org/wikipedia/commons/thumb/0/08/SMirC-cool.svg/320px-SMirC-cool.svg.png>").fadeIn();
}

もう 1 つのオプションは、追加された画像 (クリックされたとき) に対して削除アクションを実行することです。

var img = $('<img>')
            .attr('src', 'http://upload.wikimedia.org/wikipedia/commons/thumb/0/08/SMirC-cool.svg/320px-SMirC-cool.svg.png')
            .addClass('divimg')
            .css('display', 'none')
            .bind('click', function(){
                $(this).remove();
            });
$(this).prepend(img);
于 2012-05-10T13:01:25.423 に答える