Question

所以我在我的网站上有一些工作的JS代码，一旦链接被点击，就会将div交换到另一个div。但是我目前通过覆盖一个明确的gif作为链接在iframe上工作，它可以很好地工作。

现在我想将它应用到我们网站上按下的按钮以创建下载 - 我不能使用相同的隐形gif技巧，因为按钮有鼠标悬停效果然后不起作用所以我想要点击按钮时会以其他方式发生。当前工作的函数在标题中加载为...

function yourFunction(){
    document.getElementById('yourfirDiv').style.display='block';
    document.getElementById('yoursecDiv').style.display='none';
}

此时触发此功能的链接是一个完美运行的图像，如下所示......

<a href="javascript:void(0)" onclick="var fileref=document.createElement('script');fileref.setAttribute('type','text/javascript'); fileref.setAttribute('src', 'http://url.com/locker.js?guid=0512eafd69b18d22');document.body.appendChild(fileref); setTimeout(yourFunction, 3000);"> 
    <img src="http://url.com/blank.gif" style="position: absolute; z-index: 500; width: 100%; max-width: 100%; height: 280px; "> 
</a>

现在我需要应用它来在这个按钮上做同样的事情......

<div id="yoursecDiv" style="display:block;">
    <div id="downloadmp3">
        <div class="download_button_div">
            <form action="/download_file.php" method="post" name="downloadform">
                <input name="file_name" value="<?php echo $fname; ?>" type="hidden">
                <input name="bucket" value="<?php echo $bucket; ?>" type="hidden">
                <button type='submit' class='download_button' title="Click to Download Mixtape!">Download</button>
            </form>
        </div>
    </div>
</div>

有人给了我一些简单的JS，如下所示，当点击div名称触发交换命名div的函数时应该触发，但是它不起作用，代码片段是......

$("#clickablediv").bind("click",function(){
    yourFunction();
});

为了使事情稍微复杂一点，页面是一个用ajax启动的浮动页面，所以任何像上面这样的代码都必须进入加载页面的部分中的站点JS文件，如果它需要在启动时加载投资组合。在上面的链接的情况下，功能代码加载在全局网站标题中就好了，并且内联JS工作正常 - 也许有一种方法将链接应用于我的按钮divs，非常欢迎简单的输入！

Answer 1

我认为isherwood是正确的，因为你过度复杂化了。

然而，试试这个：

$(document).ready(function() {
    $(document).on("click","#clickablediv",function(){
        $('#yourfirDiv').show();
        $('#yoursecDiv').hide();
    });
});

假设#yourfirDiv的样式或类css带有“display：none”。

然后你可以从div中删除那些讨厌的onclick属性。

Javascript Div Swap on Click

1 个答案: