如果两个 div 有一个相同的类，则 javascript 会触发

Question

假设，我有 2 个 div 'menu' & 'pipe'。当我点击菜单管道的宽度将是 100% 但在这里我有 6 对像这样所以影响一个会影响所有。 “主要代码如下。” 现在在这里我想要这样的js，

addclass 'addwidth' in pipe div，但 pipe div 与对象（此处为 menu div）形式具有相同的类点击事件发生，

例如。 menu one div 被点击，因此只有 pipe one div 必须受到影响。

.hasClass 可以在某些方面提供帮助，但我不知道如何。

帮我弄个js，先谢谢了。

.leftbox{
	width:100px;
	height:400px;
	background-color:lightgreen;
	display: -webkit-flex;
    display: flex;
	-webkit-flex-direction: row;
    flex-direction: row;
}

.uprow{
	width:100px;
	height:100%;
	background-color:pink;
	display: -webkit-flex;
    display: flex;
	-webkit-flex-direction: column;
    flex-direction: column;
	 -webkit-justify-content: space-around;
    justify-content: space-around;
}

.menu{
	width:50px;
	height:50px;
	background-color:yellow;
}

.selected{
	background-color:green;
	border:2px solid blue;
}

.downrow{
	width:100%;
	height:100%;
	background-color:gray;
	display: -webkit-flex;
    display: flex;
	-webkit-flex-direction: column;
    flex-direction: column;
	 -webkit-justify-content: space-around;
    justify-content: space-around;
	
}

.pipe{
	width:10%;
	height:5px;
	background-color:aqua;
}

<div class="leftbox">
				<div class="uprow">
					<div class="menu one"></div>
					<div class="menu two"></div>
					<div class="menu three"></div>
					<div class="menu four"></div>
					<div class="menu five"></div>
					<div class="menu six"></div>
				</div>
				<div class="downrow">
					<div class="pipe one"></div>
					<div class="pipe two"></div>
					<div class="pipe three"></div>
					<div class="pipe four"></div>
					<div class="pipe five"></div>
					<div class="pipe six"></div>
				</div>
			</div>

Answer 1

将.eq() 与.index() 一起使用

$('.uprow .menu').on('click', function() {
  $('.downrow .pipe').eq($(this).index()).css('width', '100%')
})

.leftbox {
  width: 100px;
  height: 400px;
  background-color: lightgreen;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
}
.uprow {
  width: 100px;
  height: 100%;
  background-color: pink;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
.menu {
  width: 50px;
  height: 50px;
  background-color: yellow;
}
.selected {
  background-color: green;
  border: 2px solid blue;
}
.downrow {
  width: 100%;
  height: 100%;
  background-color: gray;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
.pipe {
  width: 10%;
  height: 5px;
  background-color: aqua;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="leftbox">
  <div class="uprow">
    <div class="menu one"></div>
    <div class="menu two"></div>
    <div class="menu three"></div>
    <div class="menu four"></div>
    <div class="menu five"></div>
    <div class="menu six"></div>
  </div>
  <div class="downrow">
    <div class="pipe one"></div>
    <div class="pipe two"></div>
    <div class="pipe three"></div>
    <div class="pipe four"></div>
    <div class="pipe five"></div>
    <div class="pipe six"></div>
  </div>
</div>

Answer 2

您可以使用所选元素的click 事件，如下所示。

在下面的示例中，单击任何元素只会将该元素的宽度更改为 100%。

$(function() {
  $('.pipe').click(function() {
    /* $(this) is the clicked/selected object. */
    /* Do your required action using $(this). Below is an example */
    $(this).css('width', '100%');
  });
});

.leftbox {
  width: 100px;
  height: 400px;
  background-color: lightgreen;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
}
.uprow {
  width: 100px;
  height: 100%;
  background-color: pink;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
.menu {
  width: 50px;
  height: 50px;
  background-color: yellow;
}
.selected {
  background-color: green;
  border: 2px solid blue;
}
.downrow {
  width: 100%;
  height: 100%;
  background-color: gray;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
.pipe {
  width: 10%;
  height: 5px;
  background-color: aqua;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="leftbox">
  <div class="uprow">
    <div class="menu one"></div>
    <div class="menu two"></div>
    <div class="menu three"></div>
    <div class="menu four"></div>
    <div class="menu five"></div>
    <div class="menu six"></div>
  </div>
  <div class="downrow">
    <div class="pipe one"></div>
    <div class="pipe two"></div>
    <div class="pipe three"></div>
    <div class="pipe four"></div>
    <div class="pipe five"></div>
    <div class="pipe six"></div>
  </div>
</div>