クリックして画像を変更し、隠し文字を表示する

Question

こんにちは私は自分のウェブサイト（全部で4個）のタイトルのリストを提示したいと思います。隠しテキストを追加したいので、ユーザーが小さなアイコンをクリックすると、隠しテキストが表示され、アイコンが変更されます。私はいくつかの研究を行い、追加したいくつかのコードを見つけました.1つのタイトルをクリックして他のタイトルを追加することになるまで、私のために働いていました。 Thaankあなた

$(document).ready(function() { 
 
    $('.pomme').hide(); 
 

 
    var black = true; 
 
    
 
    $('html').click(function() { 
 
     $('.pomme').hide(); 
 
     $('.apple-button').removeClass("active"); 
 
     if (black === true) { 
 
      $('.apple-img').attr('src', 'https://image.noelshack.com/fichiers/2017/44/5/1509700970-ferme.png'); 
 
      black = false; 
 
     } else { 
 
      $('.apple-img').attr('src', 'https://image.noelshack.com/fichiers/2017/44/5/1509700970-ouvert.png'); 
 
      black = true; 
 
     } 
 
    }); 
 

 
    $('.apple-button').click(function (event) { 
 
     event.stopPropagation(); 
 
     $('.pomme').toggle(); 
 
     $('.apple-button').toggleClass("active"); 
 
     if (black === true) { 
 
      $('.apple-img').attr('src', 'https://image.noelshack.com/fichiers/2017/44/5/1509700970-ferme.png'); 
 
      black = false; 
 
     } else { 
 
      $('.apple-img').attr('src', 'https://image.noelshack.com/fichiers/2017/44/5/1509700970-ouvert.png'); 
 
      black = true; 
 
     } 
 
    }); 
 

 
    $('.a-propos-menu').click(function() { 
 
     $('#a-propos').show(); 
 
     $('.apple-button').removeClass("active"); 
 
     black = false; 
 
    }); 
 

 
});

body { 
 
    background-color: #cecece; 
 
} 
 
.apple-img { 
 
    width: 18px; 
 
} 
 
.apple-button { 
 
    display: inline-block; 
 
    margin-left: 11px; 
 
    width: 100%; 
 
    height: 27px; 
 
    outline: 0; 
 
    border: 0; 
 
    background: none; 
 
} 
 
.pomme { 
 

 

 
    width: 100%x; 
 
    background: white; 
 
    border-bottom-left-radius: 7px; 
 
    border-bottom-right-radius: 7px; 
 
    display: none; 
 
} 
 
.active { 
 
    background: none; 
 
} 
 
.pomme ul { 
 
    padding-left: 0; 
 
    margin: 0; 
 
} 
 
.pomme li { 
 
    list-style-type: none; 
 
    margin: 4px 0; 
 
    padding: 3px 0 3px 15px; 
 
} 
 
.pomme li:hover { 
 
    background: #1061cb; 
 
    color: white; 
 
    cursor: default; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <button class="apple-button"> 
 
     <img class="apple-img" src="https://image.noelshack.com/fichiers/2017/44/5/1509700970-ouvert.png" alt="logo apple" /> 
 
    Option société</button> 
 
    <div class="pomme"> 
 
     <ul> 
 
      <li class="a-propos-menu">Readme</li> 
 
      <li class="how-to-menu">How to?</li> 
 
     </ul> 
 
    </div> 
 
</body>

Answer 1

あなたのような、現在のクリックされた要素と関連する要素をターゲットにthisキーワードを使用しました：

$('.apple-button').click(function(event) { 
    event.stopPropagation(); 

    $(this).next('.pomme').toggle(); 
    $(this).toggleClass("active"); 

    $('.apple-img', this).attr('src', function(index, attr) { 
     return attr == "https://image.noelshack.com/fichiers/2017/44/5/1509700970-ferme.png" ? "https://image.noelshack.com/fichiers/2017/44/5/1509700970-ouvert.png" : "https://image.noelshack.com/fichiers/2017/44/5/1509700970-ferme.png"; 
    }); 
}); 

・ホープ、このことができます。

$(document).ready(function() { 
 
    $('.pomme').hide(); 
 

 
    $('.apple-button').click(function(event) { 
 
    event.stopPropagation(); 
 

 
    $(this).next('.pomme').toggle(); 
 
    $(this).toggleClass("active"); 
 

 
    $('.apple-img', this).attr('src', function(index, attr) { 
 
     return attr == "https://image.noelshack.com/fichiers/2017/44/5/1509700970-ferme.png" ? "https://image.noelshack.com/fichiers/2017/44/5/1509700970-ouvert.png" : "https://image.noelshack.com/fichiers/2017/44/5/1509700970-ferme.png"; 
 
    }); 
 
    }); 
 

 
    $('.a-propos-menu').click(function() { 
 
    $('#a-propos').show(); 
 
    $('.apple-button').removeClass("active"); 
 
    black = false; 
 
    }); 
 

 
});

body { 
 
    background-color: #cecece; 
 
} 
 

 
.apple-img { 
 
    width: 18px; 
 
} 
 

 
.apple-button { 
 
    display: inline-block; 
 
    margin-left: 11px; 
 
    width: 100%; 
 
    height: 27px; 
 
    outline: 0; 
 
    border: 0; 
 
    background: none; 
 
} 
 

 
.pomme { 
 
    width: 100%x; 
 
    background: white; 
 
    border-bottom-left-radius: 7px; 
 
    border-bottom-right-radius: 7px; 
 
    display: none; 
 
} 
 

 
.active { 
 
    background: none; 
 
} 
 

 
.pomme ul { 
 
    padding-left: 0; 
 
    margin: 0; 
 
} 
 

 
.pomme li { 
 
    list-style-type: none; 
 
    margin: 4px 0; 
 
    padding: 3px 0 3px 15px; 
 
} 
 

 
.pomme li:hover { 
 
    background: #1061cb; 
 
    color: white; 
 
    cursor: default; 
 
} 
 

 
.closed { 
 
    background-image: url('https://image.noelshack.com/fichiers/2017/44/5/1509700970-ferme.png'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button class="apple-button"> 
 
     <img class="apple-img" src="https://image.noelshack.com/fichiers/2017/44/5/1509700970-ouvert.png" alt="logo apple" /> 
 
    Option société</button> 
 
<div class="pomme"> 
 
    <ul> 
 
    <li class="a-propos-menu">Readme</li> 
 
    <li class="how-to-menu">How to?</li> 
 
    </ul> 
 
</div> 
 
<br> 
 
<button class="apple-button"> 
 
     <img class="apple-img" src="https://image.noelshack.com/fichiers/2017/44/5/1509700970-ouvert.png" alt="logo apple" /> 
 
    Option société</button> 
 
<div class="pomme"> 
 
    <ul> 
 
    <li class="a-propos-menu">Readme</li> 
 
    <li class="how-to-menu">How to?</li> 
 
    </ul> 
 
</div>