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

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

我有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>

---

那么如何将这些数据文件放入容器中呢？我的JavaScripting技能是前所未有的

检测单击，并设置容器的背景图像或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')+'" />');
});

$（'a[数据文件]）。在（'click'，函数（e）{
e、 预防默认值（）；
$（'.bom_container'）.css（'background-image'，'url（+$（this.attr（'data-file'）+'）））；
//或者，如果您不想将其作为背景加载：
$（'.bom_container'）.html（''）；
});

如果要将图像作为HTML元素插入，请使用Case

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

工作小提琴

//加载页面后要运行的jQuery语法糖
$（函数（）{
//将单击事件附加到具有数据文件属性的任何对象
$（“[数据文件]”）。在（'单击'）上，函数（evt）{
//找出点击了什么
var clickedEl=$（evt.target）；
//获取数据文件属性
var dataFile=clickedEl.attr（'data-file'）；
var容器=$（“.bom_容器”）；
//清空div
container.empty（）；
//创建图像元素
var img=$("谢谢，@Phil。我喜欢js fiddle的例子！我想试试这个，但请告诉我把这个脚本放在哪里。我把这个脚本放在我的javascript文件中吗？如果是的话，放在哪里。或者我会把它放在有侧边栏内容的页面顶部？实际上，我只是把脚本放在侧边栏内容页面的顶部，它就工作了！！！我在跳舞我的办公室！！！现在我需要弄清楚如何使图像淡入淡出，这样它们就不会在页面上出现。我想我可以弄清楚如何操作动画不透明度功能。再次感谢你，@Phil，这让我经历了我遇到过的最大难题！@LisaG。你可以将脚本放在任何地方，它只能在页面加载后运行.jQuery的效果应该可以帮助您做到这一点。
$('li a').on('click', function() {
  var imgSrc = $(this).data('file');
  var img = document.createElement('img');
  img.src = imgSrc;

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

$(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') + ')');
        });
        });

// 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 +')');
    });
});