Question

我正在制作一个网络模板中的图像。每个图像的构造如下： -

<li>
<figure><a href="~/img/big.jpg" class="thumb"><img src="~/img/small.jpg" alt=""><span><strong>Project name:</strong><em>Villa</em><img src="~/img/search.png" alt=""></span></a></figure>
</li>

现在如标记内所示，当用户访问页面时，将呈现small.jpg，然后如果他点击small.jpg，另一个名为big.jpg的图像将显示在jquery滑块内，这里是真实网站上的示例http://static.livedemo00.template-help.com/wt_47767/index-2.html

现在我要做的是用一个按钮或一个链接替换search.png（虽然添加一个链接不起作用，因为标记已经在一个链接内！），带有“Read More”标签，所以如果用户点击滑块上或普通网页内的ReadMore，将他重定向到另一个页面？

任何人都可以这样做吗？

第二个问题。我正在尝试这个更复杂的场景，就是将当前的search.png保留在网页中，但要用滑块上的“ReadMore”替换它？

修改我想避免在我的标记中添加额外的span，因为有一个脚本会读取span并在jquery滑块内显示它们。所以我用一个文本替换了跨度如下：

  <li>
    <figure><a href="~/img/big.jpg" class="thumb"><img src="~/img/small.jpg" alt=""><span><strong>Project name:</strong><em>Villa</em><text class="read-more" data-goto="/Home/">Read More</text></span></a></figure>
    </li>

这是脚本： -

 <script>

    $(function () {
        $('.read-more').on("click", function (e) {

            window.location = $(this).attr('data-goto');
            e.stopPropagation(); // this prevents the anchor click from triggering.
        });
    })
    </script>

但目前在滑块内我会得到以下文字，

但是当我点击它时，我不会被重定向到主页，而是jquery滑块将被取消。如果我在网页内（不在jquery滑块内）并且我在ReadMore上舔我将只在我的浏览器上获取图片...

BTW这里是touch.jquery.js脚本中的回调函数，我写的是在滑块内添加span： -

function loadImage(src, callback){
            var img = $('<img>').on('load', function(){
                callback.call(img);
            });

            img.attr('src', src);
            var allcaptions = $("figure span");

            // setTimeout is a hack here, since the ".placeholders" don't exist yet
            setTimeout(function () {
                $(".placeholder").each(function (i) {

                    // in each .placeholder, copy its caption's mark-up into it (remove the img first)
                    var caption = allcaptions.eq(i).clone();
                    caption.find("img").remove();
                    $(this).append("<div class='caption'>" + caption.html() + "</div>");
                });
            }, 500
    );
        }

Answer 1

使用包含您的网址的数据属性的span标记代替搜索图像。

<li>
    <figure>
        <a href="~/img/big.jpg" class="thumb">
            <img src="~/img/small.jpg" alt=""/>
            <span><strong>Project name:</strong><em>Villa</em>
                <span class="read-more" data-goto='/read/more/url'>Read More</span>
            </span>
       </a>
    </figure>
</li>

然后javascript将是：

$(function(){
    $('.read-more').click(function(e){
        window.location = $(this).attr('data-goto');
        e.stopPropagation(); // this prevents the anchor click from triggering.
    });
})

如何使用Get request

1 个答案: