Question

我有一个界面，它使用复选框的click属性来显示/隐藏div。

这是显示或隐藏功能的示例代码块：

显示/隐藏jQuery代码

/* Only display LinkedIn sortable icon if "Display LinkedIn" is ticked */
$('#display_linkedin_icon').live("click", function() {
    if ($('#display_linkedin_icon').prop("checked")) {
        $('#LinkedIn').show();
    }
    else {
        $('#LinkedIn').hide();
    }
});

这很好用，但我想更改一些花哨的jQuery样式复选框的正常复选框。我想要在选中花式复选框时仍然触发相同的jQuery操作。复选框与jQuery iPhone复选框类似。

这是花哨复选框的jQuery代码。

Fancy Checkbox jQuery Code

$('.asw-switch-link a').live('click',function(){
    var $tag = $(this).parent();
    $('a',$tag).toggleClass('active');
    var rel = $('a.active',$tag).attr('rel');
    $tag.next('.plugin-switch-value').val(rel);

    return false;
});

并显示它们我使用：

case 'fancycheckbox':
        echo '<div class="asw-switch-link">';
        echo '<a href="#" rel="true" class="link-true ';
        echo esc_attr($options[$id]) == 'true' ? 'active' : '' ;
        echo '"></a>';
        echo '<a href="#" rel="false" class="link-false ';
        echo esc_attr($options[$id]) == 'false' ? 'active' : '' ;
        echo '"></a></div>';
        echo '<input id="'.$id.'" name="'.$this->prefix.'_options['.$id.']" class="plugin-switch-value" type="hidden" value="'.esc_attr($options[$id]).'" />';

        if($desc != '')
            echo '<span class="description">'.$desc.'</span>';

        break;

上面的代码是我正在开发的WordPress插件的一部分。

问题

问题是我现在已经将正常的复选框更改为花哨的复选框，因此jQuery“click”功能不再起作用。

从查看花哨的复选框jQuery代码我认为我可能必须使用JQuery hasclass（）函数而不是.prop（'checked“）函数检查CSS类”active“

我认为这样的事情可能有效

/* Only display LinkedIn sortable icon if "Display LinkedIn" is ticked */
$('#display_linkedin_icon').live("click", function() {
    if ($('#display_linkedin_icon').hasclass("active")) {
        $('#LinkedIn').show();
    }
    else {
        $('#LinkedIn').hide();
    }
});

但它不起作用。

非常感谢任何帮助

HTML代码

这是LinkedIn复选框的HTML源代码

    <label for="display_linkedin_icon">Display LinkedIn icon?</label></th>
    <div class="asw-switch-link"><a href="#" rel="true" class="link-true active"></a><a href="#" rel="false" class="link-false "></a></div>
    <input id="display_linkedin_icon" name="asw_options[display_linkedin_icon]" class="plugin-switch-value" type="hidden" value="true" />
<span class="description">URL will be the blog article URL or page URL.</span>

切换的#LinkedIn div

<ul id="asw-sortable">
<li id="Delicious"><span class="sortable-Delicious"></span><span class="sn">Delicious</span></li>
<li id="Twitter"><span class="sortable-Twitter"></span><span class="sn">Twitter</span></li>
<li id="Facebook"><span class="sortable-Facebook"></span><span class="sn">Facebook</span></li>
<li id="Googleplus"><span class="sortable-Googleplus"></span><span class="sn">Googleplus</span></li>
<li id="Stumbleupon"><span class="sortable-Stumbleupon"></span><span class="sn">Stumbleupon</span></li>
<li id="Pinterest"><span class="sortable-Pinterest"></span><span class="sn">Pinterest</span></li>
<li id="LinkedIn"><span class="sortable-LinkedIn"></span><span class="sn">LinkedIn</span></li>
<li id="Youtube"><span class="sortable-Youtube"></span><span class="sn">Youtube</span></li>

上述代码是可排序部分的一部分。我包含了所有图标，因此您可以看到，一旦我想出了LinkedIn图标，我就会复制其他图标的代码。

更新

好的，到目前为止，我已经通过检查隐藏的表单字段值让#LinkedIn div显示在页面加载上。如果隐藏字段设置为“true”，则会显示#LinkedIn div。

jQuery在页面加载时显示#LinkedIn，如果value ='true'

$('#LinkedIn').hide();
if ($('#display_linkedin_icon').val() == 'true') {
    $('#LinkedIn').show();
}

我仍然无法让#LinkedIn div切换，具体取决于花式复选框的值。

尝试过此功能来切换#LinkedIn div

   $('#ch_display_linkedin_icon').click(function() {
        $('#LinkedIn').toggle( $(this).toggleClass('active').hasClass('active') );
    if ($('#ch_display_linkedin_icon').hasClass('active')) {
        $('#LinkedIn').hide();
    }
    else {
        $('#LinkedIn').show();
    }
});

我在精美的复选框中添加了一个ID。上面的jQuery DOES开始切换#LinkedIn div，但并不总是按正确的顺序。几乎就是

Answer 1

不要过于简单，但这应该可以正常工作：

$('#display_linkedin_icon').click(function() {
    $('#LinkedIn').toggle( $(this).toggleClass('active').hasClass('active') );
});

我使用未弃用的.on() vs .live()。

我在点击的元素上切换active类。

最后我根据点击的元素#LinkedIn切换.hasClass()。

诗。

Answer 2

尝试在事件范围之外设置变量，并在每次单击时增加。如果奇数然后显示其他隐藏图标

var checkCount = 0;
$('#display_linkedin_icon').live("click", function() {
    checkCount ++;
    if (!(checkCount  % 2== 0)) {
        $('#LinkedIn').show();
    }
    else {
        $('#LinkedIn').hide();
    }
});

将jQuery prop（）更改为hasclass（）函数的问题

2 个答案: