javascript - 如何遍历数组并查找与数组中的值匹配的项

我有2组数组，其值由data-attribute(data-product-name)捕获，1组是可用项目的整个列表，另1组是选定的项目，对于选定的项目，它们附加到一个国家。

    <!-- the item list -->
    <div class="whole_list">
      <ul>
        <li data-product-name="a">item A<button>ATTACH</button></li>
        <li data-product-name="b">item B<button>ATTACH</button></li>
        <li data-product-name="c">item C<button>ATTACH</button></li>
        <li data-product-name="d">item D<button>ATTACH</button></li>
        <li data-product-name="e">item E<button>ATTACH</button></li>
      </ul>
    </div>

    <!-- selected item block -->
    <div class="selected_item_container">
      <ul class="selected_items">
        <li data-product-name="a">item A</li>
        <li data-product-name="b">item B</li>
        <li data-product-name="e">item E</li>
      </ul>
      <button class="edit_country">EDIT</button>
    </div>


    $('.edit_country').on('click', function () {
      // to grab text/string from .whole_list data-product-name
      var productName = []; // product name
      $('.whole_list li').each(function (index) {
        productName .push($(this).data('product-name'));
      });

      // to grab text/string from .selected_item_container data-product-name
      var selProductName = []; // selected product name
        $('.selected_item_container').find('[data-product-name]').each(function () {
         selProductName .push($(this).data('product-name'));
       });

      // if the string/text matches, change the button text
      $('.whole_list li').each(function (index) {
      if ($(this).data('product-name') === arrProductName[index]) {
        $(this).find('button').text('DETACH');
        } else {
          $(this).find('button').text('ATTACH');
        }
      });
    });

理想情况是，当用户单击edit_country按钮时，.whole_list已经将那些选定的项目按钮更改为DETACH文本。我试过了，但是问题是，它只更改了项目A和项目B按钮，项目E按钮没有变化。

我认为这与索引不匹配有关。我不确定，请告知，谢谢。

Demo site

最佳答案

使用.indexOf查找数组中是否存在值。
像这样：

arrProductName.indexOf( $(this).data('product-name') ) != -1

因为使用$(this).data('product-name') === arrProductName[index] ...
如果您的数组是这样的：

var arrProductName = ["a","c","d"];

a将在索引0中找到，
找不到b，
在索引c处找不到2 ...它是d，
在索引d处找不到3 ...它是undefined，
找不到e。

在CodePen中查看。

关于javascript - 如何遍历数组并查找与数组中的值匹配的项，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45048381/