Question

我使用一组按钮来替换iframe嵌入的src，我想将所选按钮的类设置为“current-vid”。我已经能够调用JavaScript函数来成功替换src：

<script type="text/javascript">
    function go(loc){
        document.getElementById('playthis').src = loc;
    }
</script>

使用以下onclick：

<div id="Vid-Nav-1">
    <button class="btn current-vid" onclick = "go('url#1')">Video #1</button>
    <button class="btn" onclick = "go('url#2')">Video #2</button>
    <button class="btn" onclick = "go('url#3')">Video #3</button>
</div>

问题＆gt;＆gt;如何让按钮中的onclick事件包含以下内容？

<script type="text/javascript">
    jQuery(document).ready(function($){
        $('#Vid-Nav-1 button').on('click', function() {
            $(this).addClass('current-vid').siblings().removeClass('current-vid');
        });
    });
</script>

它目前的形式不起作用。我正在使用Wordpress，如果这是相关的。

Answer 1

您应该只将url#1存储在元素属性中，然后再抓取它，而不是使用onclicks。这样你的javascript就在一个地方，而不是遍布你的html。

<div id="Vid-Nav-1">
   <button class="btn current-vid" loc="url#1">Video #1</button>
   <button class="btn" loc="url#2">Video #2</button>
   <button class="btn" loc="url#3">Video #3</button>
</div>

javascript / jquery看起来像这样

$("#Vid-Nav-1").on("click",".btn", function(e){
    e.preventDefault();
    //Store current element in variable
    var me = $(this);

    //Test if it is already current
    if(!me.hasClass('current-vid')){
        //Get iframe loc/or whatever that is and change src
        //the .attr('loc') pulls the data stored in the corresponding attribute loc=""
        document.getElementById('playthis').src = me.attr('loc');

        //Change button class
        //when use siblings put class or something
        //if you add other stuff later, it could break
        me.addClass('current-vid').siblings('.btn').removeClass('current-vid');
    }
});

如何删除这个“点击”＃39;依赖，只是让功能发生？

1 个答案: