javascript - 适用于多个类的高效函数 ReplaceWith

Question

这个脚本的第二个“点击”功能不起作用，我认为这只是一个语法问题。我对此很陌生。但我需要找到一种简单的方法，为变量数组调用一次实时“click”函数。

脚本可以工作，只是第二部分不行。

我正在寻找一种有效的方法来替换不同变量的数组，每个变量都匹配一个分类链接，并且不需要每次都创建一个新函数。

任何建议都会很棒!

提前致谢

<script type="text/javascript">

    $(window).load(function(){

        $('a.pow').live("click",function(e) {

            webgl = $('<iframe src="http://s..."> </iframe>');
            e.preventDefault();     
            $('#slider-wrapper').replaceWith(webgl);
        });

        $('a.biff').live("click",function(e) {

            video = $('<iframe src="http://s..."> </iframe>');
            e.preventDefault();
            $('#slider-wrapper').replaceWith(video);    
        });
    });

</script>

html

<div id="slider-wrapper">
    <div>
        <a class="pow" href="">
        </a>
    </div>
    <div>
        <a class="biff" href="">
        </a>
    </div>

下一个可能是..

    <div>
        <a class="batman" href="">
        </a>
    </div>
</div><-- close slider wrapper -->

Answer 1

您可以为所有将加载 iframe 的 anchor 提供一个公共(public)类，将 anchor 的描述从类移动到自定义属性，并让事件处理程序对自定义属性进行操作。

<div id="slider-wrapper">
    <div>
        <a class="link" href="" data-desc="pow">
        </a>
    <div>
    <div>
        <a class="link" href="" data-desc="biff">
        </a>
    <div>
    <div>
        <a class="link" href="" data-desc="batman">
        </a>
    <div>
</div>

在你的脚本中:

<script type="text/javascript">

    var desc_url_map = {
        "pow" : "http://s...",
        "biff" : "http://s...",
        "batman" : "http://s..."
    };

    $(window).load(function () {
        $('a.link').live('click', function(evt) {
            item = $('<iframe src="' + desc_url_map[this.dataset.desc] + '"></iframe>');
            $('#slider-wrapper').replaceWith(item);
            evt.preventDefault();
        });
    });

</script>

希望没有错误:)