javascript如果兩個div都有一個相同的類

Question

假設我有2個div 'menu'&'pipe'。當我點擊菜單管道的寬度將是100％，但在這裏我有6對相同的像這樣影響一個會影響所有。 「主要代碼在下面給出。」 現在在這裏，我想JS這樣，

addclass「addwidth」管道格但管DIV有一個相同的類形成對象（這裏，菜單DIV）形式，它的點擊事件發生，

例如。 菜單一格被點擊所以只有管一格必須受到影響。

.hasclass可以幫助某種方式，但我不知道如何。

幫助我這是js，在此先感謝。

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

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

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

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

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

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

<div class="leftbox"> 
 
\t \t \t \t <div class="uprow"> 
 
\t \t \t \t \t <div class="menu one"></div> 
 
\t \t \t \t \t <div class="menu two"></div> 
 
\t \t \t \t \t <div class="menu three"></div> 
 
\t \t \t \t \t <div class="menu four"></div> 
 
\t \t \t \t \t <div class="menu five"></div> 
 
\t \t \t \t \t <div class="menu six"></div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="downrow"> 
 
\t \t \t \t \t <div class="pipe one"></div> 
 
\t \t \t \t \t <div class="pipe two"></div> 
 
\t \t \t \t \t <div class="pipe three"></div> 
 
\t \t \t \t \t <div class="pipe four"></div> 
 
\t \t \t \t \t <div class="pipe five"></div> 
 
\t \t \t \t \t <div class="pipe six"></div> 
 
\t \t \t \t </div> 
 
\t \t \t </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>