jquery：カスタムドロップダウンメニューを作成しますか？

Question

jQueryとCSSを使用してカスタムドロップダウンメニューを作成しましたが、すべて正常に動作します。

しかし、解決策が見つからないという問題が1つあります。

現在、オプション(Option 1, Option 2, etc...)を選択することができます。また、自分の選択をクリックしてde-selectとすることもできます。

オプションが選択されている場合、私は、ドロップダウンメニューbackground:とそのcolor:を変更し、ユーザーは、私が許可しているため、彼らは、しかし、何か...

が選択されていることを見ることができますので、私はそれにchecked iconを追加ユーザーがde-selectのオプションに変更するには、background:とcolor:を変更し、checked iconを削除する必要があります。その特定のドロップダウンリストには選択肢がありません。あなたは、ドロップダウンメニューをクリックすると、あなたはさまざまなオプションを選択することができます

https://jsfiddle.net/okmpxkcu/3/

、その後、あなたはそれらを再び選択解除することができます

この良く説明するために、私はこの作業FIDDLEを作成しました。

選択がない場合は元の背景色などに戻すにはドロップダウンメニューが必要です。

あなたが.parent()を使用し

Answer 1

を理解していればlengthが他の緑の背景は背景を削除、追加ゼロより大きい場合、クラスaddedを持つすべての<p>を数える私を助けています。

var cou = 0; 
 
var myI = 0; 
 
var videoSource = []; 
 
$("div.buildExMain").find('i.fa').hide(); 
 

 
$(document).on('click', '.buildExMain', function(e) { 
 
    $('.buildExDrop').hide(); 
 
    $(this).children('.buildExDrop').show(); 
 
}); 
 

 
$(document).on('click', '.pSelection', function(e) { 
 
    //  console.log($(this).parent().children()); 
 
    var vidToAdd = $(this).attr("data-id"); 
 

 
    ///check if its added///// 
 
    if ($(this).hasClass("added")) { 
 
     $(this).removeClass("added"); 
 
     $('.fa-check:last-child', this).remove(); 
 
     $('.buildExDrop').hide(); 
 
     e.stopPropagation(); 
 

 
     videoSource = videoSource.filter(x => x != vidToAdd); 
 

 
     console.log(videoSource); 
 
    } else { 
 

 
     $('.exHolder').addClass('buildExMain'); 
 
     $(this).addClass('added'); 
 
     $(this).append('<i class="fa fa-check" aria-hidden="true"></i>'); 
 

 

 
     videoSource.push(vidToAdd); 
 

 
     var videoCount = videoSource.length; 
 

 
     console.log(videoSource); 
 

 
     if ($(this).hasClass("exc")) { 
 
      cou++; 
 
     } 
 
     e.stopPropagation(); 
 
     $('.buildExDrop').hide(); 
 

 
    } 
 
    // check if p tags with added class exists 
 
    if ($(this).parent().find('p.pSelection.exc.added').length > 0) { 
 
     $(this).closest("div.buildExMain").find('i.fa').show(); 
 
     $(this).closest('.buildExMain').addClass('selected'); 
 
    } else { 
 
     $(this).closest("div.buildExMain").find('i.fa').hide(); 
 
     $(this).closest('.buildExMain').removeClass('selected'); 
 
    } 
 
});

.exHolder { 
 
    width: 100%; 
 
    color: #e91e62; 
 
    border: solid 1px #e91e62; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    text-align: center; 
 
    background-color: #fff; 
 
    border-radius: 4px; 
 
    margin-bottom: 10px; 
 
    font-size: 20px; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.buildExDrop { 
 
    background: green; 
 
    width: 100%; 
 
    height: auto; 
 
    border: solid 1px #e91e62; 
 
    font-family: 'Raleway'; 
 
    color: #fff; 
 
    display: none; 
 
    position: absolute; 
 
    left: 0; 
 
    z-index: 1; 
 
    border-radius: 4px; 
 
} 
 
.pSelection { 
 
    position: relative; 
 
    border-bottom: solid 1px #000; 
 
} 
 
.pSelection:hover { 
 
    background-color: #ccc; 
 
    cursor: pointer; 
 
} 
 
.fa-check-circle { 
 
    position: absolute; 
 
    right: 20px; 
 
    font-size: 24px; 
 
    top: 4px; 
 
    display: none; 
 
} 
 
.fa-check { 
 
    position: absolute; 
 
    right: 20px; 
 
    font-size: 24px; 
 
    top: 0px; 
 
    display: none; 
 
} 
 
.selected { 
 
    background-color: green; 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="exHolder buildExMain"><span>Select Options</span><i class="fa fa-check-circle" aria-hidden="true"></i> 
 
    <div class="buildExDrop"> 
 
     <p class="pSelection exc" data-id="1">Option 1 </p> 
 
     <p class="pSelection exc" data-id="2">Option 2 </p> 
 
     <p class="pSelection exc" data-id="3">Option 3 </p> 
 
     <p class="pSelection exc" data-id="4">Option 4 </p> 
 

 
    </div> 
 
</div> 
 
<div class="exHolder buildExMain"><span>Select Options</span><i class="fa fa-check-circle" aria-hidden="true"></i> 
 
    <div class="buildExDrop"> 
 
     <p class="pSelection exc" data-id="1">Option 1 </p> 
 
     <p class="pSelection exc" data-id="2">Option 2 </p> 
 
     <p class="pSelection exc" data-id="3">Option 3 </p> 
 
     <p class="pSelection exc" data-id="4">Option 4 </p> 
 
    </div> 
 
</div>