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

Question

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

在管道 div 中添加类 'addwidth' 但那个 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

Use .eq() with .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>