如果元素在数组中，则在循环检查中根据锚项的 id 检查 data-id

Question

这是我的问题。

如果我的用户单击 link，我想显示一堆元素。每个 link 都有一个 id，每组元素都包含在主 div.

中

这是html：

<div class="col-md-55">
    <div>
        <img src="/wp-content/themes/wpboot/images/svg/aaps_cannabis_icon.svg">
        <h4>something</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href="#" id="course1">All Courses</a>
    </div>
</div>
<div class="col-md-55">
    <div>
        <img src="/wp-content/themes/wpboot/images/svg/aaps_nutrition_icon.svg">
        <h4>something 2</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href="#" id="course2">All Courses</a>
    </div>
</div>
<div class="col-md-9 col-md-offset-3" data-id="course1">
    <div class="col-4">
        <div>
            <h3>Course1</h3>
        </div>
    </div>
</div>
<div class="col-md-9 col-md-offset-3" data-id="course2">
    <div class="col-4">
        <div>
            <h3>Course2</h3>
        </div>
    </div>
</div>

我将使用 jquery:

访问我的所有元素

var buttonhideprogram = $('a');
var targetprograms = $('.col-md-9');
var targetprogramsid =[];
targetprograms.each(function() {
    targetprogramsid.push( $(this).data("id"));
});

buttonhideprogram.click( function(e) {
    e.preventDefault();
    if (!$(this).hasClass('Open')) {
        $(this).addClass('Open');
        var things = $(this).attr('id');
        if ($.inArray(things, targetprogramsid)!='-1') {
            console.log(targetprogramsid);
            targetprogramsid.show();
        }
    }
});

很简单，我将首先声明所有要使用 jquery 访问的元素，然后我将创建一个包含所有程序的数组，然后再次单击我将执行其他操作，但最重要的是我将创建一个名为 things 的变量，这是我要单击的元素，我将查找该 id 是否存在于我的数组中。

从那时起，我仍然无法完成代码，因为代码到目前为止有效，但我不知道如何隐藏数组中与 id 属性匹配的元素（而不是隐藏） .

有什么建议吗？

Answer 1

为什么不直接定位具有正确 data-id 的元素。

var things = $(this).attr('id');
var target = $("[data-id='" + things + "']");
target.show();

Answer 2

代码不正确，无法运行。你正在隐藏一个数组。无需将 Open 分配给 link，甚至是课程。只需检查它是否已经可见。这里有您需要的一切：

var buttonhideprogram = $('a');

buttonhideprogram.click(function(e) {
  e.preventDefault();

  var things = $(this).attr('id');
  //console.log(things)
  var elem = $('.col-md-9[data-id=' + things + ']');

  if (elem.is(":visible")) {
    elem.hide();
  } else {
    elem.show();
  }
});

Here is a working fiddle.

如果元素在数组中，则在循环检查中根据锚项的 id 检查 data-id

Check data-id based on id of an anchor item in a loop checkin if the element is within an array

javascript

jquery

html

arrays

custom-data-attribute