javascript - 选中的选项未正确保存

Question

我正在为 WordPress 设置主题构建器，但在保存单选按钮时遇到问题。

我有一个单选按钮，您可以使用它选择例如标题的布局。

当您选择它时，它会获得属性 checked=checked，该组中的其他人会删除其选中属性。这有效。

但是当我去组装将包含所有已保存选项的对象时，布局名称始终是默认名称。

如果我没有按照我的方式设置它，那么无论我选择什么，最后一个单选按钮名称总是被选为布局。代码如下所示

function builder_hb_save(e) {
  e.preventDefault();
  var builder_hb_out = {};
  $('#builder_hb_headers').find('li').each(function() {
    var $builder_hb_header = $(this);
    var li_id = $builder_hb_header.attr('id');
    builder_hb_out[li_id] = {};
    builder_hb_out[li_id]['title'] = $builder_hb_header.find('.builder_hb_header_title').val();
    builder_hb_out[li_id]['settings'] = {};
    if ($('.builder_header_layout_single').data('default') === 1) {
      var default_layout = $('.builder_header_layout_single').find('input').val();
    }
    $builder_hb_header.find('.builder_hb_setting').each(function() {
      var $builder_hb_setting = $(this);
      if (!$builder_hb_setting.parents('.builder_options_wrapper').hasClass('hidden')) {
        var builder_hb_setting_name = $builder_hb_setting.attr('name');
        // Problem starts here
        if ('builder_hb_header_layout' !== builder_hb_setting_name) { // save value for non header values - if only this is set, then the value for header is always the last one, no matter the select
          builder_hb_out[li_id]['settings'][builder_hb_setting_name] = $builder_hb_setting.val();
        } else { // Here the checked option should be selected, but it's not
          if ('checked' === $builder_hb_setting.attr('checked') && 'undefined' !== typeof $builder_hb_setting.attr('checked')) {
            builder_hb_out[li_id]['settings']['builder_hb_header_layout'] = $builder_hb_setting.val();
          } else {
            builder_hb_out[li_id]['settings']['builder_hb_header_layout'] = default_layout;
          }
        }
      }
    });
  });
  console.dir(builder_hb_out);
}

$('#save_all').on('click', builder_hb_save);

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul id="builder_hb_headers" class="builder_builder_settings">
  <li class="show" id="ui-id-1">
    <div class="header_header_settings">
      <div class="header_title">
        <input type="radio" id="default_radio_1" name="builder_hb_default" value="0" class="builder_hb_setting builder_builder_default builder_hb_default">
        <label for="default_radio_1" class="default_label">
        </label>New Header456</div>
      <span class="collapse_item">
				</span>
    </div>
    <div class="builder_options_wrapper builder_header_title builder_builder_title">
      <h4>Header Title</h4>
      <div class="value_container">
        <input type="text" name="builder_hb_header_title" value="New Header456" class="builder_hb_header_title">
      </div>
    </div>
    <div class="builder_options_wrapper builder_header_layout builder_builder_layout">
      <h4>Header Layout</h4>
      <div class="value_container">
        <label class="builder_header_layout_single" data-default="1" data-settings=".builder_logo_img, .builder_logo_retina_img, .builder_header_retina_width, .builder_header_retina_height, .builder_background_img, .builder_background_color, .builder_text_color, .builder_icon_select, .builder_header_menu_first, .builder_header_menu_second, .builder_hover_text_color, .builder_transparent_logo_img, .builder_transparent_logo_retina_img, .builder_transparent_header_retina_width, .builder_transparent_header_retina_height, .builder_transparent_text_color, .builder_hover_transparent_text_color">
          <input type="radio" name="builder_hb_header_layout" value="header_layout_logo_centered" class="builder_hb_header_layout builder_hb_setting">
          <img src="wp-content/themes/builder/inc/theme-settings/images/header3.png" alt="header_layout_logo_centered" title="header_layout_logo_centered">
        </label>
        <label class="builder_header_layout_single" data-default="" data-settings=".builder_header_menu_first, .builder_header_retina_height, .builder_background_img, .builder_background_color, .builder_icon_select">
          <input type="radio" name="builder_hb_header_layout" value="header_layout_logo_left_fixed" class="builder_hb_header_layout builder_hb_setting" checked="checked">
          <img src="wp-content/themes/builder/inc/theme-settings/images/header2.png" alt="header_layout_logo_left_fixed" title="header_layout_logo_left_fixed">
        </label>
        <label class="builder_header_layout_single" data-default="" data-settings=".builder_header_menu_first, .builder_logo_img, .builder_header_retina_height, .builder_background_img">
          <input type="radio" name="builder_hb_header_layout" value="header_layout_logo_left_magic_background" class="builder_hb_header_layout builder_hb_setting">
          <img src="wp-content/themes/builder/inc/theme-settings/images/header1.png" alt="header_layout_logo_left_magic_background" title="header_layout_logo_left_magic_background">
        </label>
      </div>
    </div>
    <div class="builder_options_wrapper builder_header_menu_first hidden">
      <h4>Select Menu</h4>
      <div class="value_container">
        <select class="builder_hb_setting builder_header_menu_first" name="builder_hb_header_menu_first">
          <option value="header-menu-default">Header Menu Default</option>
          <option value="header-menu-left">Centered Logo - Menu Left</option>
          <option value="header-menu-right">Centered Logo - Menu Right</option>
          <option value="proba">Proba</option>
        </select>
      </div>
    </div>
    <div class="builder_options_wrapper builder_header_menu_second hidden">
      <h4>Select Second Menu</h4>
      <div class="value_container">
        <select class="builder_hb_setting builder_header_menu_second" name="builder_hb_header_menu_second">
          <option value="header-menu-default">Header Menu Default</option>
          <option value="header-menu-left">Centered Logo - Menu Left</option>
          <option value="header-menu-right">Centered Logo - Menu Right</option>
          <option value="proba">Proba</option>
        </select>
      </div>
    </div>
    <div class="builder_options_wrapper builder_logo_img hidden">
      <h4>Logo</h4>
      <div class="value_container">
        <div class="builder_uploaded_image">
        </div>
        <input type="text" name="builder_hb_header_logo" value="" class="builder_image_upload builder_hb_setting builder_hb_header_logo">
        <input type="button" name="image_upload" value="Upload Image" class="button upload_image_button">
        <input type="button" name="remove_image_upload" value="Remove Image" class="button remove_image_button">
      </div>
    </div>
    <div class="builder_options_wrapper builder_logo_retina_img hidden">
      <h4>Retina Logo</h4>
      <div class="value_container">
        <div class="builder_uploaded_image">
        </div>
        <input type="text" name="builder_hb_header_logo_retina" value="" class="builder_image_upload builder_hb_setting builder_hb_header_logo_retina">
        <input type="button" name="image_upload" value="Upload Image" class="button upload_image_button">
        <input type="button" class="button remove_image_button" name="remove_image_upload" value="Remove Image">
      </div>
    </div>
    <div class="builder_options_wrapper builder_header_retina_width hidden">
      <h4>Retina Width</h4>
      <div class="value_container">
        <input type="text" name="builder_hb_header_retina_width" value="" class="builder_hb_setting">
      </div>
    </div>
    <div class="builder_options_wrapper builder_header_retina_height">
      <h4>Retina Height</h4>
      <div class="value_container">
        <input type="text" name="builder_hb_header_retina_height" value="" class="builder_hb_setting">
      </div>
    </div>
    <div class="builder_options_wrapper builder_background_img builder_hb_switch">
      <h4>Background Image</h4>
      <div class="value_container">
        <div class="builder_uploaded_image">
        </div>
        <input type="text" name="builder_hb_header_background_image" value="" class="builder_image_upload builder_hb_setting builder_hb_header_logo_retina">
        <input type="button" name="image_upload" value="Upload Image" class="button upload_image_button">
        <input type="button" class="button remove_image_button" name="remove_image_upload" value="Remove Image">
      </div>
    </div>
    <div class="builder_options_wrapper builder_background_color builder_hb_switch">
      <h4>Background Color</h4>
      <div class="value_container">
        <div class="wp-picker-container">
          <a tabindex="0" class="wp-color-result" title="Select Color" data-current="Current Color">
          </a>
          <span class="wp-picker-input-wrap">
							<input type="text" name="builder_hb_background_color" value="" class="builder_hb_setting builder_color_picker wp-color-picker" style="display: none;">
							<input type="button" class="button button-small hidden wp-picker-clear" value="Clear">
						</span>
          <div class="wp-picker-holder">
          </div>
        </div>
      </div>
    </div>
    <div class="builder_options_wrapper builder_text_color builder_hb_switch hidden">
      <h4>Text Color</h4>
      <div class="value_container">
        <div class="wp-picker-container">
          <a tabindex="0" class="wp-color-result" title="Select Color" data-current="Current Color">
          </a>
          <span class="wp-picker-input-wrap">
							<input type="text" name="builder_hb_text_color" value="" class="builder_hb_setting builder_color_picker wp-color-picker" style="display: none;">
							<input type="button" class="button button-small hidden wp-picker-clear" value="Clear">
						</span>
          <div class="wp-picker-holder">
          </div>
        </div>
      </div>
    </div>
    <div class="builder_options_wrapper builder_hover_text_color builder_hb_switch hidden">
      <h4>Hover Text Color</h4>
      <div class="value_container">
        <div class="wp-picker-container">
          <a tabindex="0" class="wp-color-result" title="Select Color" data-current="Current Color">
          </a>
          <span class="wp-picker-input-wrap">
							<input type="text" name="builder_hb_hover_text_color" value="" class="builder_hb_setting builder_color_picker wp-color-picker" style="display: none;">
							<input type="button" class="button button-small hidden wp-picker-clear" value="Clear">
						</span>
          <div class="wp-picker-holder">
          </div>
        </div>
        <p class="description">Color for hover and current menu items.</p>
      </div>
    </div>
    <div class="builder_options_wrapper builder_transparent_logo_img builder_hb_switch hidden">
      <h4>Transparent Logo</h4>
      <div class="value_container">
        <div class="builder_uploaded_image">
        </div>
        <input type="text" name="builder_hb_header_transparent_logo" value="" class="builder_image_upload builder_hb_setting builder_hb_header_logo">
        <input type="button" name="image_upload" value="Upload Image" class="button upload_image_button">
        <input type="button" name="remove_image_upload" value="Remove Image" class="button remove_image_button">
      </div>
    </div>
    <div class="builder_options_wrapper builder_transparent_logo_retina_img builder_hb_switch hidden">
      <h4>Transparent Logo Retina Logo</h4>
      <div class="value_container">
        <div class="builder_uploaded_image">
        </div>
        <input type="text" name="builder_hb_header_transparent_logo_retina" value="" class="builder_image_upload builder_hb_setting builder_hb_header_transparent_logo_retina">
        <input type="button" name="image_upload" value="Upload Image" class="button upload_image_button">
        <input type="button" class="button remove_image_button" name="remove_image_upload" value="Remove Image">
      </div>
    </div>
    <div class="builder_options_wrapper builder_transparent_header_retina_width builder_hb_switch hidden">
      <h4>Transparent Retina Width</h4>
      <div class="value_container">
        <input type="text" name="builder_hb_transparent_header_retina_width" value="" class="builder_hb_setting">
      </div>
    </div>
    <div class="builder_options_wrapper builder_transparent_header_retina_height builder_hb_switch hidden">
      <h4>Transparent Retina Height</h4>
      <div class="value_container">
        <input type="text" name="builder_hb_transparent_header_retina_height" value="" class="builder_hb_setting">
      </div>
    </div>
    <div class="builder_options_wrapper builder_transparent_text_color builder_hb_switch hidden">
      <h4>Transparent Text Color</h4>
      <div class="value_container">
        <div class="wp-picker-container">
          <a tabindex="0" class="wp-color-result" title="Select Color" data-current="Current Color">
          </a>
          <span class="wp-picker-input-wrap">
							<input type="text" name="builder_hb_transparent_text_color" value="" class="builder_hb_setting builder_color_picker wp-color-picker" style="display: none;">
							<input type="button" class="button button-small hidden wp-picker-clear" value="Clear">
						</span>
          <div class="wp-picker-holder">
          </div>
        </div>
      </div>
    </div>
    <div class="header_footer_settings">
      <span class="builder_builder_delete">Delete</span>
      <a href="#" class="builder_hb_save">Save</a>
    </div>
  </li>
</ul>
<div id="save_all">SAVE ALL</div>

这就是简而言之的代码，有一些函数可以切换可见性和检查属性，但这一个让我发疯，我看不出我做错了什么。

Answer 1

要检查复选框是否为您应该使用 .is()与 :checked 选择器一起使用或使用 .prop()方法而不是 .attr()

使用这些将返回true/false

$builder_hb_setting.is(':checked');
$builder_hb_setting.prop('checked');

一本好书.prop() vs .attr()