如何在wordpress中添加单选按钮到我的网站

Posted 2021-03-31

我在我的网站上使用WordPress。我想在选择单选按钮时向我的WordPress页面添加单选按钮我想在下面显示一个表格。有谁能够帮我

答案

你好也许更多细节可以帮助ppl告诉你更好的答案。但是有了这么多的信息我会得到一些东西：这只是样本。你只需要为你的特定目的进行编辑。 **将html代码放在wordpress编辑器中（放在编辑器部分，不是可视化，可视化编辑器可能会自动转换一些标签）

**将js代码放入你的js脚本标签中的某些地方!!如果你不知道只需使用this plugin

**如果jQuery不起作用，请将此行添加到主题或子主题的function.php中，以将jQuery库添加到您的页面（99％wordpress默认加载它）：

// include custom jQuery
function shapeSpace_include_custom_jquery() {

    wp_deregister_script('jquery');
    wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', array(), null, true);

}
add_action('wp_enqueue_scripts', 'shapeSpace_include_custom_jquery');

HTML代码：

<form>
  <div>
    <input type="radio" name="fruit" value="orange" id="orange">
    <label for="orange">orange</label>
  </div>
  <div>
    <input type="radio" name="fruit" value="apple" id="apple">
    <label for="apple">apple</label>
  </div>
  <div>
    <input type="radio" name="fruit" value="banana" id="banana">
    <label for="banana">banana</label>
  </div>
  <div id="show-table"></div>
</form>

脚本代码：

<script>
    jQuery(document).ready(function ($) {
        $("input").on("click", function () {
            var checkedNode = $("input:checked").val();
            var orangTable = '<table style="width:100%"><tr><th>fruit</th></tr><tr><td>name</td></tr><tr><td>orang</td></tr></table>';
            var appleTable = '<table style="width:100%"><tr><th>fruit</th></tr><tr><td>name</td></tr><tr><td>apple</td></tr></table>';
            var bananaTable = '<table style="width:100%"><tr><th>fruit</th></tr><tr><td>name</td></tr><tr><td>banana</td></tr></table>';

            switch (checkedNode) {
                case 'orange':
                    $("#show-table").html(orangTable);
                    break;
                case 'apple':
                    $("#show-table").html(appleTable);
                    break;
                case 'banana':
                    $("#show-table").html(bananaTable);
                    break;

                default:

            }
        }
    }
</script>

当选择该按钮时，分配给每个按钮的特定表将显示在具有id =“show-table”的div内。你可以为这个目的延伸这个方法。只知道这不是有效的方法或最好的方法。这只是一种方式..