0

入力チェックボックスがループされている各配列属性の配列があります。チェックされた入力の値を返すことができますが、配列のすべてのインスタンスを出力します。

     $('#moon-generator-settings .moon-generator-attr').each(function() {
        if ( $(this).val() !== '') {
            $('#moon-generator-result').val( $('#moon-generator-result').val() + ' ' + $(this).attr('name') + '="' + $(this).val() + '"' );                
        }

これにより、ワードプレスのエディターにコードが出力されます。コードは次のようになります

      [icons myicon="globe"]

しかし、代わりに戻ります

      [icons myicon="globe" myicon="pencil" myicon="plus" myicon="minus" myicon="left" myicon="up" myicon="right" myicon="down" myicon="home" myicon="pause" myicon="fast-fw" myicon="fast-bw" myicon="to-end" myicon="to-start" myicon="stop"]

$(this).attr('name') はどこにあり、$(this).val() は明らかに myicon が等しい値、私の入力内の値です。入力のすべてではなく、チェックされた値のみを返すのに問題があるため、チェックボックスが正しく返されていないと思われます。

ここにいくつかのコードがあります。

     $('#moon-generator-insert').live('click', function(event) {

    var queried_shortcode = $('#moon-generator-select').find(':checked').val();
    var moon_compatibility_mode_prefix = $('#moon-compatibility-mode-prefix').val();

    $('#moon-generator-result').val('[' + moon_compatibility_mode_prefix + queried_shortcode);

    $('#moon-generator-settings .moon-generator-attr').each(function() {
        if ( $(this).val() !== '') {
            $('#moon-generator-result').val( $('#moon-generator-result').val() + ' ' + $(this).attr('name') + '="' + $(this).val() + '"' );                
        }

    });

    $('#moon-generator-result').val($('#moon-generator-result').val() + ']');

私はできる限り読んだことがありますが、.find(:checked).val() をそのように書くべきだとは思いませんか?

解析された HTML 形式の php は次のとおりです。

     <div class="icons">
     <input class="moon-generator-attr" type="checkbox" value="globe" name="myicon">
     <input class="moon-generator-attr" type="checkbox" value="pencil" name="myicon">
     <input class="moon-generator-attr" type="checkbox" value="plus" name="myicon">
     <input class="moon-generator-attr" type="checkbox" value="minus" name="myicon">
     <input class="moon-generator-attr" type="checkbox" value="left" name="myicon">
     <input class="moon-generator-attr" type="checkbox" value="up" name="myicon">
     <input class="moon-generator-attr" type="checkbox" value="right" name="myicon">
     <input class="moon-generator-attr" type="checkbox" value="down" name="myicon">
     <input class="moon-generator-attr" type="checkbox" value="home" name="myicon">
     <input class="moon-generator-attr" type="checkbox" value="pause" name="myicon">
     <input class="moon-generator-attr" type="checkbox" value="fast-fw" name="myicon">
     <input class="moon-generator-attr" type="checkbox" value="fast-bw" name="myicon">
     <input class="moon-generator-attr" type="checkbox" value="to-end" name="myicon">
     <input class="moon-generator-attr" type="checkbox" value="to-start" name="myicon">
     <input class="moon-generator-attr" type="checkbox" value="stop" name="myicon">
     </div>

だから、ここで何がうまくいくのですか...選択オプションのドロップダウンを使用する場合、問題はありません...

      <select id="moon-generator-attr-style" class="moon-generator-attr" name="style">
        <option>1</option>
        <option>2</option>
      </select>

Jクエリ

      $('#moon-generator-insert').live('click', function(event) {
    var queried_shortcode = $('#moon-generator-select').find(':selected').val();
    var moon_compatibility_mode_prefix = $('#moon-compatibility-mode-prefix').val();
    $('#moon-generator-result').val('[' + moon_compatibility_mode_prefix + queried_shortcode);
    $('#moon-generator-settings .moon-generator-attr').each(function() {
        if ( $(this).val() !== '' ) {
            $('#moon-generator-result').val( $('#moon-generator-result').val() + ' ' + $(this).attr('name') + '="' + $(this).val() + '"' );
        }
    });
    $('#moon-generator-result').val($('#moon-generator-result').val() + ']');

みんなありがとう、これは更新されたコードです...

      $('#moon-generator-insert').live('click', function(event) {
    var queried_shortcode = $('#moon-generator-select').find(':selected').val();

    var moon_compatibility_mode_prefix = $('#moon-compatibility-mode-prefix').val();
    var result = $(".moon-generator-attr:checked").map(function () {
    var $this = $(this);
    return $this.attr("name") + '="' + $this.val() + '"';
    }).get().join(" ");

    $('#moon-generator-result').val('[' + moon_compatibility_mode_prefix + queried_shortcode);
    $('#moon-generator-settings .moon-generator-attr').each(function() {
        if ( $(this).val() !== '' ) {
            $('#moon-generator-result').val( $('#moon-generator-result').val() + ' ' + $(this).attr('name') + '="' + result + '"' );
        }
    });
    $('#moon-generator-result').val($('#moon-generator-result').val() + ']');

これに出力します

      [icons myicon="myicon="stop"" myicon="myicon="stop"" myicon="myicon="stop"" myicon="myicon="stop"" myicon="myicon="stop"" myicon="myicon="stop"" myicon="myicon="stop"" myicon="myicon="stop"" myicon="myicon="stop"" myicon="myicon="stop"" myicon="myicon="stop"" myicon="myicon="stop"" myicon="myicon="stop"" myicon="myicon="stop"" myicon="myicon="stop""]

ここにチェックボックスphpがあります

      // Checkbox
        if ( count( $attr_info['checks'] ) && $attr_info['checks'] ) {              
            $return .= '<div class="icons">';
            foreach ( $attr_info['checks'] as $attr_value ) {
                $attr_value_selected = ( $attr_info['default'] == $attr_value ) ? ' checked="checked"' : '';        
            $return .= '<input name="' . $attr_name . '" class="moon-generator-attr" type="checkbox" value="' . $attr_value . '" '.$attr_value_selected.'>  </input> ';

            }
            $return .= '</div>';
        }

ここに配列があります

      'icons' => array(
            'name' => 'Icons',
            'type' => 'single',
            'atts' => array(
                'myicon' => array(
                    'checks' => array(
                        'globe',
                        'pencil',
                        'plus',
                        'minus',
                        'left',
                        'up',
                        'right',
                        'down',
                        'home',
                        'pause',
                        'fast-fw',
                        'fast-bw',
                        'to-end',
                        'to-start',
                        'stop',
                    ),
                    'desc' => __( 'Add an icon', 'moon-shortcodes' )
                )
            ),
            'usage' => '[icons myicon="globe"][/icons]',
            'desc' => __( 'Add Icon', 'moon-shortcodes' )
        ),
4

2 に答える 2

1

あなたはこれを複雑にしすぎています。

これは、実際の例を示すフィドルです。

コードを次のように単純化しました。

$('#butt').click(function () {
    var txt = $('#output').text();
    $('.moon-generator-attr').each(function () {
        var $this = $(this);
        if ($this.prop('checked')) {
            var name = $this.attr('name');
            var val = $this.val();
            txt += ' ' + name + '="' + val + '"';
        }
    });
    $('#output').text(txt);
});
于 2013-06-26T02:38:00.733 に答える