javascript - 单击锚点时将图像加载到容器中的脚本

Question

这对许多人来说可能听起来很愚蠢，但我的大脑只是被难住了。

我有 10 个链接，并且希望每次单击链接时将不同的图像加载到容器中。这似乎并不难，对吧？

<div class="sidebar_content">
<ul>&nbsp;
        <li><a data-file="CF6-80C0.jpg?v=1">CF6-80C0</a></li>
        <li><a data-file="CF6-80C1.jpg?v=1">CF6-80C1</a></li>
        <li><a data-file="CF6-80C2.jpg?v=1">CF6-80C2</a></li>
        <li><a data-file="CF6-80C3.jpg?v=1">CF6-80C3</a></li>
        <li><a data-file="CF6-80C4.jpg?v=1">CF6-80C4</a></li>
        <li><a data-file="CF6-80C5.jpg?v=1">CF6-80C5</a></li>
        <li><a data-file="CF6-80C6.jpg?v=1">CF6-80C6</a></li>
        <li><a data-file="CF6-80C7.jpg?v=1">CF6-80C7</a></li>
        <li><a data-file="CF6-80C8.jpg?v=1">CF6-80C8</a></li>
        <li><a data-file="CF6-80C9.jpg?v=1">CF6-80C9</a></li>
    </ul>
</div>

我在 css 中的容器是

 .bom_container { position: absolute; width: 720px; height: 500px; border: 1px solid #000; }

那么如何将这些数据文件放入我的容器中呢？我的 JavaScripting 技能是超越新的！

Answer 1

工作js小提琴

http://jsfiddle.net/LzZnm/

// jQuery syntactic sugar to run after page loads
$(function () {
    // attach a click event to anything with a data-file attribute
    $("[data-file]").on('click', function (evt) {
        // figure out what was clicked
        var clickedEl = $(evt.target);
        // get the data-file attribute
        var dataFile = clickedEl.attr('data-file');
        var container = $(".bom_container");
        // empty the div
        container.empty();
        // create image element
        var img = $("<img/>").attr("src", dataFile)
        // add it to the container
        container.append(img);
        // or update the background image
        // container.css('background-image','url('+ dataFile +')');
    });
});

Answer 2

Detect the click, and set either the background image or the html content of the container:

$('a[data-file]').on('click',function(e) {
    e.preventDefault();
    $('.bom_container').css('background-image','url('+$(this).attr('data-file')+')');
    //or, if you want to load it not as a background:
    $('.bom_container').html('<img src="'+$(this).attr('data-file')+'" />');
});

Answer 3

$('li a').on('click', function() {
  var imgSrc = $(this).data('file');
  var img = document.createElement('img');
  img.src = imgSrc;

  $('.bom_container').append(img);
});

Answer 4

Case, if you want insert image as HTML element.

$(function () {
    $('ul').on('click', 'a', function () {
        $('div.sidebar_content').children('img').remove();
        $('<img />').attr('src', $(this).data('file')).appendTo('div.sidebar_content');
    });
    });

Case, if you want insert image as background:

$(function () {
        $('ul').on('click', 'a', function () {
            $('div.sidebar_content').css('background-image', 'url(' + $(this).data('file') + ')');
        });
        });