div内的jQuery图像交换

Question

我正在努力达到类似的目的 。

该图片将来自供稿网址，我不确定如何防止它们在新窗口中打开，这是到目前为止的内容：

使用Javascript：

的jquery / 1.3.2 / jquery.min.js

<script type="text/javascript">
    jQuery(function($){
        $('#more-views a').click(function(){
            $('#main-image img').fadeOut('slow').delay(2000).remove();
            //$('#main-image').append('&lt;img src="' + $(this).attr('href') + '" alt="" style="display:none;" /&gt;');

            $('#main-image').append('<img src="' + $(this).attr('data') + '" alt="" style="display:none;" />');
            $('#main-image img').fadeIn('slow');
            return false;
        });
    });
</script>

HTML

<div id="more-views">
    <a data="http://www.domain.com/image1.jpg"> 1 Day</a>
    <a data="http://www.domain.com/image2.jpg"> 5 Days</a>
    <a data="http://www.domain.com/image3.jpg"> 1 Month</a>
</div>


<div id="main-image">
    <img src="http://www.domain.com/image1.jpg" alt="1d" />
</div>

请帮忙！ 谢谢！

Answer 1

尝试在JavaScript中添加一行以进行测试，看看是否会添加段落标记。 如果是这样，则可能是图像的网址而不是此处的代码有问题。

jQuery(function($){
    $('#more-views a').click(function(){
        $('#main-image p').fadeOut('slow').delay(2000).remove();
//-------v add this line for testing
        $('#main-image').append('<p>' + $(this).attr('href') + '</p>);

        $('#main-image').append('<img src="' + $(this).attr('href') + '" alt="" style="display:none;" />');
        $('#main-image p').fadeIn('slow');
        return false;
    });
});

==少旧==

好的，我想我现在已经了解您的问题了。 不要让您的<a>标记具有href属性，而应使用data属性。

因此，您的锚标记应如下所示：

<a data='domain.com/image1.jpg'>image1</a>

然后，您需要替换两条JavaScript行：

$('#main-image').append('<img src="' + $(this).attr('href') + '" alt="" style="display:none;" />');

变为：

$('#default-market-chart').append('<img src="' + $(this).attr('data') + '" alt="" style="display:none;" />');

并且，您将必须用#default-market-chart替换JavaScript中的#main-image所有实例，因为您似乎没有带有和ID为main-image的元素

==老==

尝试更换< 和> 使用<和> ，以便您的网页将您提供的字符串视为HTML标记，而不仅仅是字符串。