-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コードを見て、.prop('checked")関数の代わりにJQuery hasclass()関数を使用して、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 アイコンについてこれを理解したら、他のアイコンのコードを複製します。

アップデート

OK、これまでのところ、非表示のフォーム フィールドの値をチェックすることで、ページの読み込み時に表示する #LinkedIn div を取得しました。非表示フィールドが「true」に設定されている場合、#LinkedIn div が表示されます。

値が「true」の場合、ページの読み込み時に #LinkedIn を表示する jQuery

$('#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 の切り替えを開始しますが、常に正しい順序であるとは限りません。もうすぐそこ

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 に答える