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

检测点击，并设置容器的背景图片或html内容：

$('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

大小写，如果您想将插入图像作为HTML元素。

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

大小写，如果你想插入图片作为背景：

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

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

4 个答案: