Question

我目前正在学习Web开发的基础知识，但我还没有遇到过一个解决方案，就是使用jQuery从目录中获取图像。如果我有一个如下定义的复选框......

<input id="check" type="checkbox">

...如何从目录中获取图像，并根据复选框的当前状态在<div>中显示它（不会弄乱HTML）？到目前为止我发现的是这个，但这只是为了显示<div>的现有内容，对吗？

$(document).ready(function(){
    $('#check').click(function(){
        if(!$(this).is(':checked')){
            ("div").show();
        }
    });
});

我不想触摸HTML的原因是我希望更深入地了解jQuery更强大的功能（我不想构建坏习惯），但是事实证明这是我自己难以做到的事情。我非常感谢任何帮助（或者只是一些提示）！

tl; dr：选中框=图像，未选中=无图像。 jQuery只是因为原因。

Answer 1

如果你的HTML看起来像这样：

<input id="check" type="checkbox">
<div class="image-to-show-and-hide"><img id="image-to-place" /></div>

你可以让你的jQuery看起来像这样：

$(document).ready(function(){
  $('#check').click(function(){
    // Avoiding the negation where possible can make code a easier to read.
    if($(this).is(':checked')){
      // Show the div with the specified class:
      $(".image-to-show-and-hide").show();
      // And show the image by filling its "src" attribute.
      $("#image-to-place").attr("src","http://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg");
    }
    else {
      // Otherwise, hide the div.
      $(".image-to-show-and-hide").hide();
    }
  });
});

https://jsfiddle.net/9gdpdLmb/1/

Answer 2

你可以（假设div存在）

$(document).ready(function () {
    //create a reference to the div which can be reused later
    var $div = $('div'),
        $img;
    $('#check').change(function () {
        //set the display status of the div based on checked state of the checkbox
        $div.toggle(this.checked);
        if (this.checked) {
            //if it is checked and the img is not present create one
            if (!$img) {
                $img = $('<img />', {
                    src: '//placehold.it/64/00ff00'
                }).appendTo($div);
            }
        }
    });
});

演示：Fiddle

使用jQuery从目录显示图像？

2 个答案: