-1

我有一个使用复选框的单击属性来显示/隐藏 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 代码。

花式复选框 jQuery 代码

$('.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“单击”功能不再起作用。

通过查看花哨的复选框 jQuery 代码，我想我可能必须使用 JQuery hasclass() 函数而不是 .prop('checked") 函数来检查 CSS 类“活动”

我认为这样的事情可能会奏效

/* 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。如果隐藏字段设置为“真”，则将显示#LinkedIn div。

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

$('#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 确实开始切换 #LinkedIn div，但并不总是以正确的顺序。差不多好了

4

2 回答 2

0

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

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

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

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

#LinkedIn最后，我根据单击的元素进行切换.hasClass()。

诗歌。

于 2012-09-29T00:58:40.593 回答
0

尝试在事件范围之外设置一个变量，并在每次点击时递增。如果奇怪则显示否则隐藏图标

var checkCount = 0;
$('#display_linkedin_icon').live("click", function() {
    checkCount ++;
    if (!(checkCount  % 2== 0)) {
        $('#LinkedIn').show();
    }
    else {
        $('#LinkedIn').hide();
    }
});
于 2012-09-29T00:59:39.937 回答