Javascript 单击元素时，获取索引，然后传递该索引以触发另一个事件
我有很多复制的父母，每一个都有8个空的沙发。我试图在单击时获取子div的编号，该编号似乎有效，但随后我尝试传递索引编号，以便我可以向具有相同索引的每个第二个父级添加一个类 例如，我单击第三个子div。它应该绘制第二个父类，并添加一个类，同时突出显示该子类中的第三个子div 我希望这是有道理的 到目前为止，我只能做到这一点：Javascript 单击元素时，获取索引，然后传递该索引以触发另一个事件,javascript,jquery,Javascript,Jquery,我有很多复制的父母，每一个都有8个空的沙发。我试图在单击时获取子div的编号，该编号似乎有效，但随后我尝试传递索引编号，以便我可以向具有相同索引的每个第二个父级添加一个类 例如，我单击第三个子div。它应该绘制第二个父类，并添加一个类，同时突出显示该子类中的第三个子div 我希望这是有道理的 到目前为止，我只能做到这一点： $('.fader-empty').click( function(){ var index = $(this).index(); a
$('.fader-empty').click(
function(){
var index = $(this).index();
alert(index);
$('.fader-section').find('.fader-empty:nth-child(3)').addClass('shoo');
});
这是一个。只需在第一个选择器中添加：奇数即可选择第二个父项，即第二个、第四个等 我还将3替换为索引+1-注意，它是1索引而不是0索引
$('.fader-section:odd').find('.fader-empty:nth-child(' + (index + 1) + ')').addClass('shoo');
您只需要将3替换为索引+1，因为索引从0开始，所以您的代码应该是这样的：
$('.fader-empty').click(
function () {
var index = $(this).index();
$('.fader-section').find('.fader-empty:nth-child(' + (index + 1) + ')').addClass('shoo');
});
$('.fader-empty').click(function () {
var faderIndex = $(this).index();
var parent = $(this).parent().parent();
var parentIndex = $(this).parent().index();
$('.fader-section').each(function () {
if ($(this).index() === parentIndex) {
$(this).find('.fader-empty:nth-child(' + (faderIndex + 1) + ')').addClass('shoo');
}
});
});
在阅读您的问题时，似乎要求突出显示.fader部分元素的.fader空单元格，这些元素出现在下面的“列”中，可能出现在您单击的.fader空元素上方 要做到这一点是有意义的，而且几乎是一个先决条件，除非您在一个非常封闭和受控的环境中操作，首先确定您单击的元素所在的列，然后在找到您单击的元素的索引后，将给定的类名应用于同一列中同一索引的所有其他元素 为此，我建议如下：
// first a simple jQuery plug-in to identify the columns:
(function ($) {
$.fn.identifyColumn = function () {
// initialising the column-count at 0:
var column = 0,
// finding the offset().top position of
// the first element of the collection:
topOffset = this.eq(0).offset().top;
// iterating over each element in the collection
// here 'this' is the jQuery object/collection,
// itself, inside the each() loop 'this' refers
// to individual elements inside of that
// jQuery object/collection:
return this.each(function () {
// setting the 'data-column' attribute using
// attr() instead of data(), because I want
// the column to be amongst the element's
// attributes, not held in jQuery's data-store
// (which is initialised by data-* attributes,
// but the attributes are not updated by
// setting new data properties with the data()
// method):
$(this).attr('data-column', function () {
// caching the $(this):
var self = $(this);
// if the offset().top is the same as
// the established topOffset then we
// can infer that we're on the same 'row'
// as a corollary, if the offset().top
// is different we can infer we're on a
// new row:
if (topOffset !== self.offset().top) {
// updating the topOffset with the
// offset().top of the new 'row':
topOffset = self.offset().top;
// resetting the column counter:
column = 0;
}
// returning the column+<integer> string:
return 'column' + ++column;
});
});
};
})(jQuery);
// selecting the '.fader-section' elements, and
// applying the plugin:
$('.fader-section').identifyColumn()
// finding the '.fader-empty' elements within
// the '.fader-section' elements, and binding
// an anonymous event-handler for the 'click'
// event:
.find('.fader-empty').on('click', function () {
// caching '$(this)' for subsequent use:
var self = $(this),
// finding the index of the clicked element:
index = self.index(),
// finding the closest '.fader-section' ancestor,
// and retrieving its 'data-column' attribute value:
column = self.closest('.fader-section').attr('data-column');
// selecting all '.fader-section' elements, and
// filtering that collection to only those that share
// the same 'data-column' attribute-value:
$('.fader-section').filter(function () {
return this.dataset.column === column;
// looking within the retained '.fader-section' elements
// for the '.fader-empty' descendant elements which
// are also at the equivalent index, using the CSS
// ':nth-child()' selector, which requires increasing
// the found index number by 1 (JavaScript is zero-based,
// CSS is 1-based); and then adding the 'shoo' class to
// those elements:
}).find('.fader-empty:nth-child(' + (index + 1) + ')').addClass('shoo');
});
有点难以想象，至少对我来说，如果不查看HTML，您将尝试做什么。可以分享吗？抱歉是的，用html显示我的意思可能更容易。我已经做了一个演示，因为html必须被复制以准确显示我需要做什么。我想做的是，当你点击其中一个单独的块时，我希望它下面的所有块都高亮显示。当前，当我单击时，我只能使每个块中的第三个块高亮显示，但它正在每个块中高亮显示第三个块。因此，简而言之，我只希望能够单击一个块，并使下面的所有块高亮显示。不过，我真的不知道该怎么做。@SuziLarsen仍然无法理解如果我点击第一个区块的第一列会发生什么。？@Suzi Larsen请查看答案是什么。除非你点击其中一个，否则它应该突出显示你点击的那一个，而不是突出显示向左和向右，它应该抓住正上方和正下方的一个，并在垂直线上突出显示。@SuziLarsen嘿，你想在每一个新层的元素上突出显示还是什么。？在条带中显示突出显示。理想情况下，当你点击某个东西时，它会突出显示音量控制器上方和下方的每个块空块，但在右边和左边都没有。我应该说，上面和下面我指的是视觉效果。这可能有点混淆，因为它可以被解释为上面和下面的html。只是视觉效果好得多是的！！还有一件事吗？是否有办法隔离您单击的音量控制器部分，使其忽略其他音量控制器部分？所以，如果我在第二或第四音量控制器部分div中按下，比如说一个音量控制器为空，它只会高亮显示t
很抱歉，这是一个冗长的希望，它让唤醒已经设法做了一些事情，通过使用相同的想法，你开始了。我不确定它是否合适，但它似乎起了作用。我使用了你的想法，并将其应用于此。它起作用了@SuziLarsen是的，这是一个很好的方法，我使用了另一个代码，但使用了相同的逻辑，它也在工作，看看我的编辑。