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

Question

假设我有2个div '菜单'＆amp; '管'即可。当我点击菜单管道的宽度将是100％，但在这里我有6对相同，所以影响一个将影响所有。 “主要代码如下。” 现在我想要这样的js，

管道div中的

addclass' addwidth '但管道div 与对象（此处为菜单div ）形成一个相同的类点击事件发生了，

例如。单击 菜单一个 ，只有 管道一个div 必须受到影响。

.hasClass可以在某种程度上提供帮助，但我不知道如何。

请事先帮助我，谢谢你。

import matplotlib.pyplot as plt

x = range(100)
y = range(100,200)
fig = plt.figure()
ax1 = fig.add_subplot(111)

ax1.scatter(x[:4], y[:4], s=10, c='b', marker="s", label='first')
ax1.scatter(x[40:],y[40:], s=10, c='r', marker="o", label='second')
plt.show()

.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;
}

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％。

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;