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() + '"' );                
        }

这会将代码输出到 wordpress 上的编辑器中，代码应如下所示

      [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"]

myicon 所在的位置，这就是 $(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>

jQuery

      $('#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

3

问题是，无论复选框是否被选中，它们仍然有一个值，因此.val()即使未选中也会返回该值。您需要在循环时通过:checked 选择器过滤复选框。

以下代码将返回一个包含所有选中项的字符串：

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

alert("Result='" + result + "'");

这是一个小提琴： http: //jsfiddle.net/bman654/NE8M9/ 只需单击一些复选框并单击Go

-- 来自 OP 的更新代码 --

var queried_shortcode = $('#moon-generator-select').find(':selected').val();

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

var resultString = '[' + moon_compatibility_mode_prefix +
                   queried_shortcode + ' ' + checkedString + ']';

$('#moon-generator-result').val(resultString);
于 2013-06-26T02:31:32.980 回答
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 回答