сделать больше всего div кликабельным на WordPress с помощью jQuery - PullRequest
Новая
       23

сделать больше всего div кликабельным на WordPress с помощью jQuery

0 голосов
/ 19 октября 2019

ПОДВЕДИТЕ ПРОБЛЕМУ

Я заявляю, что я практически ничего не знаю о языках HTML и JavaScript, я знаю CSS. На WordPress, с визуальным композитором, я пытался сделать весь ряд кликабельным. Я сделал это с помощью jQuery-кода, основанного онлайн: 

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

Я добавил в Visual Composer объект для Java и вставил код. После того, как я создал классы, вставил ссылку, добавил в CSS функцию «cursor: pointer» и все работает правильно.

Проблема в том, что она работает только на одном ряду. Когда я пытаюсь продублировать код, назначить разные классы и ссылки для создания более интерактивных элементов 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 всегда единственный кликабельный.

Ответы [ 2 ]

0 голосов
/ 20 октября 2019

Я нашел решение. Импортируя написанный выше код, исправленный вами, он работает. Я не знаю, является ли этот метод теоретически правильным, но он работает нормально. Итак ...

В визуальном компоновщике вы должны вставить объект для добавления Java-кода в каждую строку, которую вы хотите сделать кликабельной (например: для 5 кликабельных элементов div вы делаете 5 объектов для вставкикод Java). Внутри каждого объекта вы должны вставить специальный код для каждого класса: 

<script type="text/javascript">
jQuery(".class1”).click(function() {
window.location = “#1”;
});
</script>
0 голосов
/ 19 октября 2019

Чтобы убедиться, что ваш 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>
...