【问题标题】:Stylize Radio Buttons using jQuery (Wordpress)使用 jQuery (Wordpress) 样式化单选按钮
【发布时间】:2016-06-03 13:59:32
【问题描述】:

我找到了一个很好的单选按钮样式化教程。我可以让 CSS 部分工作,但我不擅长 jquery/javascript。我正在尝试通过将其变成 WordPress 插件来创建效果。任何帮助表示赞赏。

教程:http://www.jqueryscript.net/form/jQuery-Plugin-To-Turn-Radio-Buttons-Checkboxes-Into-Labels-zInput.html

演示:http://www.jqueryscript.net/demo/jQuery-Plugin-To-Turn-Radio-Buttons-Checkboxes-Into-Labels-zInput/

添加 jquery 代码似乎不允许选择任何内容。我确实知道一点,知道我需要将 $ 更改为 jQuery。

提前致谢。

【问题讨论】:

    标签: jquery wordpress radio-button


    【解决方案1】:

    而且,尽管我一直在寻找几个小时,但我偶然发现了一个有效的答案。

    jQuery(document).ready(function ($) {

    $('input[type="radio"], label').addClass('stylized');

    $('input').click(function () {
        $('input:not(:checked)').parent().removeClass("active");
        $('input:checked').parent().addClass("active");
    });    
    

    });

    所以基本上,我添加了一个程式化的类来将按钮和活动类转换为仅那些选定的项目。在此之前,我可以做活动部分,但它不会坚持单个单选按钮集。

    来自 nandokakimoto 的解决方案:https://stackoverflow.com/posts/3376557/

    第一次点击时,每个项目都被选中,所以有一个故障。

    Screenshot

    【讨论】:

    • 以及使这一切正常工作的最终代码,没有任何副作用:jQuery(document).ready(function ($) { $('input[type="radio"], label').addClass('stylized'); $('input').click(function () { $('input:not(:checked)').parent().removeClass("active"); $(this).closest("label").addClass("active"); }); });
    猜你喜欢
    • 2011-01-08
    • 1970-01-01
    • 1970-01-01
    • 2012-01-22
    • 1970-01-01
    • 2012-01-21
    • 2014-10-24
    相关资源
    最近更新 更多