javascript - 查找文本来比较真假

Question

我正在尝试在 javascript/jquery 中构建一个 json 对象来比较 .这是我所拥有的

html:

<div class="field">
    <div>size</div>
    <div>large</div>
    <div>medium</div>
    <div>number</div>
</div>

js:

selectedObj = {
  'fieldSize':false,
  'sizeXSmall':false,
  'sizeSmall':false,
  'sizeMedium':false,
  'sizeLarge':false,
  'sizeXLarge':false,
  'fieldName':false,
  'fieldNum':false
};

if(jQuery('.field div:contains("size")')){selectedObj['fieldSize'] = true}
if(jQuery('.field div:contains("xs")')){selectedObj['sizeXSmall'] = true}
if(jQuery('.field div:contains("small")')){selectedObj['sizeSmall'] = true}
if(jQuery('.field div:contains("medium")')){selectedObj['sizeMedium'] = true}
if(jQuery('.field div:contains("large")')){selectedObj['sizeLarge'] = true}
if(jQuery('.field div:contains("xl")')){selectedObj['sizeXLarge'] = true}
if(jQuery('.field div:contains("name")')){selectedObj['fieldName'] = true}
if(jQuery('.field div:contains("number")')){selectedObj['fieldNum'] = true}

所以理想情况下我最终会得到一个如下所示的对象:

selectedObj = {
  'fieldSize':true,
  'sizeXSmall':false,
  'sizeSmall':false,
  'sizeMedium':true,
  'sizeLarge':true,
  'sizeXLarge':false,
  'fieldName':false,
  'fieldNum':true
};

相反，我最终得到了一个一切都是真的的对象。这是一个例子:

http://jsfiddle.net/vz600nd7/

另外，当我在控制台之前和之后记录它时，它看起来像这样:

看起来“预览”提供了正确的信息，但实际 View 却并非如此。

Answer 1

正如我在评论中所说，jQuery(selector) 将返回一个 jQuery 对象，该对象始终是一个真值。所以你的 if 条件每次都会被执行。

我会尝试类似的

var log = (function() {
  var $log = $('#log');
  return function(msg) {
    $('<p/>', {
      text: msg
    }).appendTo($log)
  }
})();

var map = {
  'fieldSize': 'size',
  'sizeXSmall': 'xs',
  'sizeSmall': 'small',
  'sizeMedium': 'medium',
  'sizeLarge': 'large',
  'sizeXLarge': 'xl',
  'fieldName': 'name',
  'fieldNum': 'number'
};
selectedObj = {
  'fieldSize': false,
  'sizeXSmall': false,
  'sizeSmall': false,
  'sizeMedium': false,
  'sizeLarge': false,
  'sizeXLarge': false,
  'fieldName': false,
  'fieldNum': false
};

var $els = jQuery('.field div');
$.each(map, function(key, value) {
  selectedObj[key] = $els.is(':contains("' + value + '")')
});
log('After: ' + JSON.stringify(selectedObj))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="field">
  <div>size</div>
  <div>large</div>
  <div>medium</div>
  <div>number</div>
</div>
<div id="log"></div>