Question

我尝试在Wordpress中包含以下代码。选择不同的单选按钮时，将显示不同的文本。它在javascript中工作但是当我将它传输到wordpress页面时，它不起作用。有什么问题？

我感谢所有的帮助！

<html>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
    $(".text").hide();
    $(".text1").hide();
$(".text2").hide();
    $(".text3").hide();
$(".text4").hide();
    $(".text5").hide();
$(".text6").hide();

    $("#r1").click(function () {
        $(".text").show();
        $(".text1").hide();
$(".text2").hide();
        $(".text3").hide();
$(".text4").hide();
        $(".text5").hide();
$(".text6").hide();
    });

    $("#r2").click(function () {
        $(".text").hide();
        $(".text1").show();
$(".text2").hide();
        $(".text3").hide();
$(".text4").hide();
        $(".text5").hide();
$(".text6").hide();
    });

$("#r3").click(function () {
        $(".text").hide();
        $(".text1").hide();
$(".text2").show();
        $(".text3").hide();
$(".text4").hide();
        $(".text5").hide();
$(".text6").hide();
    });
$("#r4").click(function () {
        $(".text").hide();
        $(".text1").hide();
$(".text2").hide();
        $(".text3").show();
$(".text4").hide();
        $(".text5").hide();
$(".text6").hide();
    });
$("#r5").click(function () {
        $(".text").hide();
        $(".text1").hide();
$(".text2").hide();
        $(".text3").show();
$(".text4").hide();
        $(".text5").hide();
$(".text6").hide();
    });
$("#r5").click(function () {
        $(".text").hide();
        $(".text1").hide();
$(".text2").hide();
        $(".text3").hide();
$(".text4").show();
        $(".text5").hide();
$(".text6").hide();
    });
$("#r6").click(function () {
        $(".text").hide();
        $(".text1").hide();
$(".text2").hide();
        $(".text3").hide();
$(".text4").hide();
        $(".text5").show();
$(".text6").hide();
    });
$("#r7").click(function () {
        $(".text").hide();
        $(".text1").hide();
$(".text2").hide();
        $(".text3").hide();
$(".text4").hide();
        $(".text5").hide();
$(".text6").show();
    });

});
</script>
<p>
    <input type="radio" name="radio1" id="r1" value="Show"> China
    <input type="radio" name="radio1" id="r2" value="Nothing"> Hong Kong
<input type="radio" name="radio1" id="r3" value="Show"> Macau
    <input type="radio" name="radio1" id="r4" value="Nothing"> Taiwan
<input type="radio" name="radio1" id="r5" value="Show"> Singapore
    <input type="radio" name="radio1" id="r6" value="Nothing"> Japan
<input type="radio" name="radio1" id="r7" value="Show"> South Korea

</p>
<div class="text">
     Text
</div>
<div class="text1">
     Text1

</div>
<div class="text2">
     Text2

</div>
<div class="text3">
     Text3

</div>
<div class="text4">
     Text4

</div>
<div class="text5">
     Text5

</div>
<div class="text6">
     Text6

</div>
</body>
</html>

Answer 1

替换＆＃34; $＆＃34;与＆＃34; jQuery＆＃34; ，它应该工作。

您可以在文档中了解有关该主题的更多信息：https://codex.wordpress.org/Function_Reference/wp_enqueue_script

P.S。您可以通过将要隐藏的元素组合在同一行中来缩短脚本。

<script>
jQuery(document).ready(function () {
    jQuery(".text , .text1, .text2, .text3, .text4, .text5, .text6").hide();


jQuery("#r1").click(function () {
    jQuery(".text").show();
    jQuery(".text1, .text2, .text3, .text4, .text5, .text6").hide();
});

jQuery("#r2").click(function () {
    jQuery(".text1").show();
    jQuery(".text, .text2, .text3, .text4, .text5, .text6").hide();
});

jQuery("#r3").click(function () {
    jQuery(".text2").show();
    jQuery(".text, .text1, .text3, .text4, .text5, .text6").hide();
});
jQuery("#r4").click(function () {
   jQuery(".text3").show();
   jQuery(".text, .text1, .text2, .text4, .text5, .text6").hide();

});
jQuery("#r5").click(function () {
    jQuery(".text3").show();
    jQuery(".text, .text2, .text1, .text4, .text5, .text6").hide();

});
jQuery("#r5").click(function () {
    jQuery(".text4").show();
    jQuery(".text, .text1, .text2, .text3, .text5, .text6").hide();

});
jQuery("#r6").click(function () {
    jQuery(".text5").show();
    jQuery(".text, .text1, .text2, .text3, .text4, .text6").hide();        
});
jQuery("#r7").click(function () {
    jQuery(".text6").show();
    jQuery(".text, .text1, .text2, .text3, .text4, .text5").hide(); 
});

});
</script>

在Wordpress中使用Action创建单选按钮

1 个答案: