[使用jQuery在wordpress上使更多的div可点击

问题描述 投票:-1回答:1

解决问题

我说我对html和javascript语言几乎一无所知,我知道css。在wordpress上,使用可视作曲器,我试图使整行都可单击。我已经使用在线建立的jQuery代码完成了它:

<script type="text/javascript"> 
jQuery(".LinkZoom1").click(function() {
    window.location = "http://www.framedvision.org/portfolio/videomapping_oggetti_milano/";
});
</script>

我已将可视化对象添加到Java对象,并且已在代码中添加了对象。创建类之后,插入链接,将“ cursor:pointer”功能添加到CSS,一切正常。

问题是它仅在单行上起作用。当我尝试复制代码,分配不同的类和链接以创建更多可点击的div时,它将无法正常工作。结果是只有页面的第一个div可单击,而div则不可。

我尝试过的内容

我尝试了以下代码的不同组合:

<script type="text/javascript"> 
jQuery(".class1”).click(function() {
    window.location = “#1”;
}); 
</script>

<script type="text/javascript"> 
jQuery(".class2”).click(function() {
    window.location = “#2”;
}); 
</script>

<script type="text/javascript"> 
jQuery(".class3”).click(function() {
    window.location = “#3”;
}); 
</script>

<script type="text/javascript"> 
jQuery(".class4”).click(function() {
    window.location = “#4”;
}); 
</script>

<script type="text/javascript"> 
jQuery(".class5”).click(function() {
    window.location = “#5”;
}); 
</script>

始终将对象用于Java代码:我将它们全部放在一起,分别放在要使其可单击的行中,这是行不通的。结果始终相同:只有第一个div变为可点击状态。即使将Java代码的对象从第一行移到其他行,结果也是相同的。第一个div始终是唯一可点击的。

javascript jquery wordpress row visual-composer
1个回答
0
投票

为了确保您的js jQuery代码有效,请通过.js文件添加脚本

但是首先,查找您主题的footer.php文件,并在下面添加代码:

jQuery(document).ready(function(){
    jQuery(".your_class").click(function() {
        window.location = "https://bluebezer.com.br";
    }); 
});

wp_footer()之后]]

        <?php wp_footer(); ?> 

        <!-- add here the sample code -->

        jQuery(document).ready(function(){
            jQuery(".your_class").click(function() {
                window.location = "https://bluebezer.com.br";
            }); 
        });

    </body>
</html>

请记住,您必须将类放入希望其可单击的元素中,并且这些元素必须具有与编写时完全相同的javascript代码中使用的类。

<div class="your_class"> <!-- this will execute the clickable code -->
    <!-- ... other code -->
</div>


<div class="your_class35413"> <!-- this will not execute the clickable code -->
    <!-- ... other code -->
</div>

<div class="your_class"> <!-- this will execute the clickable code -->
    <!-- ... other code -->
</div>

<div class="your_class4156130"> <!-- this will not execute the clickable code -->
    <!-- ... other code -->
</div>

<div class="your_class"> <!-- this will execute the clickable code -->
    <!-- ... other code -->
</div>
© www.soinside.com 2019 - 2024. All rights reserved.