Question

我有多个具有相同类（.item）的div，并试图弄清楚如何在2个div（#open和#close）之间独立切换。

例如，单击“ A”或“ B”分别在“打开”和“关闭”之间切换。

我尝试在（.item）之前放置“（this）”，但这导致切换完全无效。

$(this).on("click", function(event) {
  $(event.target).closest(".item").toggleClass("highlight").toggleClass("marked unmarked");
  if ($(".item").hasClass('unmarked')) {
    $("#open").show();
    $("#close").hide();
  } else if ($(".item").hasClass('marked')) {
    $("#close").show();
    $("#open").hide();
  } else {
    $("#close").hide();
    $("#open").hide();
  }
});

.item {
  text-align: center;
  margin: 5px;
  padding: 5px;
  background: #EEEEEE;
}

.highlight {
  background: orange;
}

#open,
#close {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="item marked">A</div>
<div class="item marked">B</div>
<div class="item marked">C</div>
<div id="open">Open</div>
<div id="close">Close</div>

Answer 1

假设我正确理解了您的问题

对于这种情况，我的建议是不要依赖“ this”关键字。

$（this）.on（'click'....太荒谬了。它必须包含在其他代码中，以允许相对于“ this”。

取而代之的是

DataGridViewRow dgvrow = DGV_PatientImages.CurrentRow;
if (dgvrow.Cells["DGV_PatientImages_ID"].Value != DBNull.Value)
{
    ImgId = Convert.ToInt32(DGV_PatientImages.Rows[RowIndex].Cells[4].Value);
}

并通过

引用它们

var my_elemens = getElementsByClassName('item')

然后，无论您要单击什么，都可以使用它，因此...

my_elemens[0] // A
my_elemens[1] // B
my_elemens[2] // C

Answer 2

您可能正在寻找这种行为吗？。

$('.item').on('click', function() {
  if ($(this).hasClass('highlight')) {
    $(this).removeClass('highlight');
    $('#open').hide();
    $('#close').show();
  } else {
    $('.item.highlight').removeClass('highlight');
    $(this).addClass('highlight');
    $('#open').show();
    $('#close').hide();
  }
})

.item {text-align: center;margin: 5px;padding: 5px;background: #EEEEEE;}
.highlight {background: orange;}
#open, #close {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div id="open">Open</div>
<div id="close">Close</div>

小提琴

https://jsfiddle.net/Hastig/127newyj/

多个具有相同类的DIV，每个DIV在2个DIV之间独立切换

2 个答案: