jQuery - 最後に選択した要素を見つける

ヘッドファーストシリーズからjQueryを学び、その例題の1つを扱っています。最後に選択した要素を見つける必要があります。jQuery - 最後に選択した要素を見つける

ここから私が持っているものは次のとおりです。第2章：このページには4つのイメージがあり、ユーザーがクリックすると、各イメージの下部にランダム割引メッセージが表示されます。もっと面白く見えるように、私は同じ本から第1章を学んだメッセージにslideUp()関数を追加しました。

ここまでです：ユーザーが画像の1つをクリックすると、ランダムディスカウントメッセージがそのメッセージの下にスライドしてメッセージを表示します。ユーザーが他の画像をクリックすると、以前のメッセージがスライドアップし、新しいランダム割引メッセージがクリックされた画像の下にスライドします。ここに私のコードの簡略版があります。

$('.jumpDiv').click(function() { 
 
       $('.jumpDiv').children('.discountDiv').slideUp(); 
 
    $('.jumpDiv p').remove(); 
 
    var discount = Math.floor((Math.random() * 5) + 5); 
 
    var msg = '<p>Your discount is ' + discount + '%</p>'; 
 
    $(this).children('.discountDiv').append(msg); 
 
    $(this).children('.discountDiv').slideDown(); 
 
});

.jumpDiv{ 
 
    float:left; 
 
} 
 
#main{ 
 
    border:1px solid; 
 
    height:500px; 
 
    width:auto; 
 
    background-color: grey; 
 
} 
 
#main .jumpDiv{ 
 
    border-right: 1px solid; 
 
    border-bottom: 1px solid; 
 
    height:245px; 
 
    width:245px; 
 
    font-size:20px; 
 
} 
 
#main .jumpDiv>div{ 
 
    text-align:center; 
 
    background-color:#fee; 
 
    cursor: pointer; 
 
    
 
} 
 
.discountDiv{ 
 
    text-align: center; 
 
    display:none; 
 
    border:1px solid; 
 
    border-bottom-left-radius: 10px; 
 
    border-bottom-right-radius: 10px; 
 
    
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<body> 
 
<div id="main"> 
 
      <div class="jumpDiv"> 
 
       <div> Click Here</div> 
 
       <div class="discountDiv"> 
 

 
       </div> 
 
      </div> 
 
      <div class="jumpDiv"> 
 
       <div> Click Here</div> 
 
       <div class="discountDiv"> 
 

 
       </div> 
 
      </div> 
 
      <div class="jumpDiv"> 
 
       <div> Click Here</div> 
 
       <div class="discountDiv"> 
 

 
       </div> 
 
      </div> 
 
      <div class="jumpDiv"> 
 
       <div> Click Here</div> 
 
       <div class="discountDiv"> 
 

 
       </div> 
 
      </div> 
 
     </div> 
 
     <script 
 
\t \t \t src="https://code.jquery.com/jquery-3.2.1.js" 
 
\t \t \t integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" 
 
\t \t \t crossorigin="anonymous"></script> 
 
</body>

私は削除する必要がグリッチは、ユーザーが繰り返し同じdiv要素をクリックした場合、割引のメッセージのdivをそのまま滞在し、ただランダムに生成されたコンテンツを更新する必要があり、です。ユーザーが同じdivを再びクリックした場合、このdivが上下にスライドするのを止めるにはどうすればいいですか？最後にクリックされた要素にアクセスし、メッセージを更新する前に何らかの理由で割引メッセージを元に戻す方法はありますか？

出典

2017-10-09 Mani Malhotra

あなたは」 lastClickedエンティティへの参照を格納し、それを比較する必要があります次のクリックされた値は、それが同じであれば何もしません。以下を見てください。

var lastClicked = null; 
 
$('.jumpDiv').click(function() { 
 
    if(lastClicked === this) { 
 
     /*Don't do anything*/ 
 
     return; 
 
    } 
 

 
    $('.jumpDiv').children('.discountDiv').slideUp(); 
 
    $('.jumpDiv p').remove(); 
 
    var discount = Math.floor((Math.random() * 5) + 5); 
 
    var msg = '<p>Your discount is ' + discount + '%</p>'; 
 
    $(this).children('.discountDiv').append(msg); 
 
    $(this).children('.discountDiv').slideDown(); 
 
    
 
    lastClicked = this; 
 
});

.jumpDiv{ 
 
    float:left; 
 
} 
 
#main{ 
 
    border:1px solid; 
 
    height:500px; 
 
    width:auto; 
 
    background-color: grey; 
 
} 
 
#main .jumpDiv{ 
 
    border-right: 1px solid; 
 
    border-bottom: 1px solid; 
 
    height:245px; 
 
    width:245px; 
 
    font-size:20px; 
 
} 
 
#main .jumpDiv>div{ 
 
    text-align:center; 
 
    background-color:#fee; 
 
    cursor: pointer; 
 
    
 
} 
 
.discountDiv{ 
 
    text-align: center; 
 
    display:none; 
 
    border:1px solid; 
 
    border-bottom-left-radius: 10px; 
 
    border-bottom-right-radius: 10px; 
 
    
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<body> 
 
<div id="main"> 
 
      <div class="jumpDiv"> 
 
       <div> Click Here</div> 
 
       <div class="discountDiv"> 
 

 
       </div> 
 
      </div> 
 
      <div class="jumpDiv"> 
 
       <div> Click Here</div> 
 
       <div class="discountDiv"> 
 

 
       </div> 
 
      </div> 
 
      <div class="jumpDiv"> 
 
       <div> Click Here</div> 
 
       <div class="discountDiv"> 
 

 
       </div> 
 
      </div> 
 
      <div class="jumpDiv"> 
 
       <div> Click Here</div> 
 
       <div class="discountDiv"> 
 

 
       </div> 
 
      </div> 
 
     </div> 
 
     <script 
 
\t \t \t src="https://code.jquery.com/jquery-3.2.1.js" 
 
\t \t \t integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" 
 
\t \t \t crossorigin="anonymous"></script> 
 
</body>

出典

2017-10-09 11:56:37 11thdimension

おかげ11thdimensionは、私が...おかげで、同じラインに沿って考えていたが、また、あなたのソリューションは、私が当初予定何のより良い、より適切なバージョンを持っている...アイデアを実行する方法を見つけ出すcudn'tバンチ.... –

あなたは大歓迎です！ – 11thdimension

私はどのクラスが開いているかを示すためにクラスを使用しました。それから私たちが開こうとしているものと同じものを閉じようとしているかどうかをテストし、同じでない場合にはそれを閉じます。

$('.jumpDiv').click(function() { 
 
    var activeDiscount = $('.discountDiv.active'); 
 
    if (activeDiscount.closest('.jumpDiv')[0] != $(this)[0]) { 
 
    activeDiscount.removeClass('active').slideUp(); 
 
    } 
 
    $('.jumpDiv p').remove(); 
 
    var discount = Math.floor((Math.random() * 5) + 5); 
 
    var msg = '<p>Your discount is ' + discount + '%</p>'; 
 
    $(this).children('.discountDiv').append(msg); 
 
    $(this).children('.discountDiv').slideDown().addClass('active'); 
 
});

.jumpDiv { 
 
    float: left; 
 
} 
 

 
#main { 
 
    border: 1px solid; 
 
    height: 500px; 
 
    width: auto; 
 
    background-color: grey; 
 
} 
 

 
#main .jumpDiv { 
 
    border-right: 1px solid; 
 
    border-bottom: 1px solid; 
 
    height: 245px; 
 
    width: 245px; 
 
    font-size: 20px; 
 
} 
 

 
#main .jumpDiv>div { 
 
    text-align: center; 
 
    background-color: #fee; 
 
    cursor: pointer; 
 
} 
 

 
.discountDiv { 
 
    text-align: center; 
 
    display: none; 
 
    border: 1px solid; 
 
    border-bottom-left-radius: 10px; 
 
    border-bottom-right-radius: 10px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<body> 
 
    <div id="main"> 
 
    <div class="jumpDiv"> 
 
     <div> Click Here</div> 
 
     <div class="discountDiv"> 
 

 
     </div> 
 
    </div> 
 
    <div class="jumpDiv"> 
 
     <div> Click Here</div> 
 
     <div class="discountDiv"> 
 

 
     </div> 
 
    </div> 
 
    <div class="jumpDiv"> 
 
     <div> Click Here</div> 
 
     <div class="discountDiv"> 
 

 
     </div> 
 
    </div> 
 
    <div class="jumpDiv"> 
 
     <div> Click Here</div> 
 
     <div class="discountDiv"> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> 
 
</body>

出典

2017-10-09 11:49:32 Salketer

あなたはDOMオブジェクトを比較し、あなたが二度同じ要素をクリックしたとき確認し、本実施例を試すことができます。

var previousTarget=null; 
 
$('.jumpDiv').click(function() { 
 
    previousTarget=this; 
 
    if(this===previousTarget) { 
 
     $('.jumpDiv p').remove(); 
 
     var discount = Math.floor((Math.random() * 5) + 5); 
 
     var msg = '<p>Your discount is ' + discount + '%</p>'; 
 
     $(this).children('.discountDiv').append(msg); 
 
     $(this).children('.discountDiv').slideDown(); 
 
    } 
 
    else { 
 
     $('.jumpDiv').children('.discountDiv').slideUp(); 
 
    } 
 
    return false; 
 
});

.jumpDiv{ 
 
    float:left; 
 
} 
 
#main{ 
 
    border:1px solid; 
 
    height:500px; 
 
    width:auto; 
 
    background-color: grey; 
 
} 
 
#main .jumpDiv{ 
 
    border-right: 1px solid; 
 
    border-bottom: 1px solid; 
 
    height:245px; 
 
    width:245px; 
 
    font-size:20px; 
 
} 
 
#main .jumpDiv>div{ 
 
    text-align:center; 
 
    background-color:#fee; 
 
    cursor: pointer; 
 
    
 
} 
 
.discountDiv{ 
 
    text-align: center; 
 
    display:none; 
 
    border:1px solid; 
 
    border-bottom-left-radius: 10px; 
 
    border-bottom-right-radius: 10px; 
 
    
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<body> 
 
<div id="main"> 
 
      <div class="jumpDiv"> 
 
       <div> Click Here</div> 
 
       <div class="discountDiv"> 
 

 
       </div> 
 
      </div> 
 
      <div class="jumpDiv"> 
 
       <div> Click Here</div> 
 
       <div class="discountDiv"> 
 

 
       </div> 
 
      </div> 
 
      <div class="jumpDiv"> 
 
       <div> Click Here</div> 
 
       <div class="discountDiv"> 
 

 
       </div> 
 
      </div> 
 
      <div class="jumpDiv"> 
 
       <div> Click Here</div> 
 
       <div class="discountDiv"> 
 

 
       </div> 
 
      </div> 
 
     </div> 
 
     <script 
 
\t \t \t src="https://code.jquery.com/jquery-3.2.1.js" 
 
\t \t \t integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" 
 
\t \t \t crossorigin="anonymous"></script> 
 
</body>

出典

2017-10-09 11:55:01 SilverSurfer

あなたは、アクティブなタブにクラスを追加することができます。それが既に開いているかどうかを確認してください。ここで

はjsFiddleです：https://jsfiddle.net/bf1tmxsw/

出典

2017-10-09 11:59:37

この質問を解決するためのあなたのコードは、あなたの答えに含まれるべきであるだけにリンクされていない、また、答えはエディタでスタックスニペット]ボタンを使用して実行可能なコードを持つことができます。あなたの実際のソリューションに関しては、あなたの例では、OPが防止しようとしていた2回目のクリックで割引メッセージが隠されています。 –

ああ、私はそれが練習のコードだったので、私は考えました。私はいくつかのより良い機能を示すべきです。 –

私はそれを得ることができませんでした、なぜそのスニペットで答えを追加する必要があります。 Jsfiddleは（私が感じるように）より良いコード分離で同じことをします。だからリンクを追加することは私にとっては良いようです。私はスタックスニペットを考慮して、今後これを使用しようとしますが。 :) –

ただ、次のコードを使用して、現在のイベントトリガーを確認してください。

$('.jumpDiv').click(function() { 
    var discount = Math.floor((Math.random() * 5) + 5); 
    var msg = '<p>Your discount is ' + discount + '%</p>'; 
    $(this).children('.discountDiv').append(msg); 

    if($(this).children('.discountDiv').css('display') === 'none'){ 
     $('.jumpDiv').children('.discountDiv').slideUp(); 
     $('.jumpDiv p').remove(); 
     $(this).children('.discountDiv').slideDown(); 
    } 
});

出典

2017-10-09 12:02:13 ykaragol

ノートOPはまだそれが隠されていない場合でもdiscountDivの内容を変更したいと思われる、jsfiddle代わりのスタックスニペットを使用することで結構ですdiv要素はそのまま滞在し、ただランダムに生成されたコンテンツ "_ –

ありがとうを更新する必要があります！コードを更新しました。 – ykaragol

あなたがた要素場合はスキップして、ちょうどslideUp()見える.discountDivコードを変更することができます既にクリックされています。 jQueryセレクタ:visibleを使ってこのテストを行うことができます。また、追加する代わりにhtmlを設定するだけで、<p>要素を削除する必要はありません。

$('.jumpDiv').click(function() { 
    //Store these so you are not doing multiple selection calls. 
    var jumpDiv = $(this); 
    var discountDiv = jumpDiv.children('.discountDiv'); 

    var discount = Math.floor((Math.random() * 5) + 5); 
    var msg = '<p>Your discount is ' + discount + '%</p>'; 
    discountDiv.html(msg); 

    //If element was not visible it means some other is and needs hiding 
    if(!discountDiv.is(':visible')){ 
    //select all dicountDiv's that are currently visible and hide them 
    $('.discountDiv:visible').slideUp(); 
    } 
    discountDiv.slideDown();  
});

デモ

$('.jumpDiv').click(function() { 
 
    var jumpDiv = $(this); 
 
    var discountDiv = jumpDiv.children('.discountDiv'); 
 
    var discount = Math.floor((Math.random() * 5) + 5); 
 
    var msg = '<p>Your discount is ' + discount + '%</p>'; 
 
    discountDiv.html(msg); 
 
    if (!discountDiv.is(':visible')) { 
 
    $('.discountDiv:visible').slideUp(); 
 
    } 
 
    discountDiv.slideDown(); 
 
});

.jumpDiv { 
 
    float: left; 
 
} 
 

 
#main { 
 
    border: 1px solid; 
 
    height: 500px; 
 
    width: auto; 
 
    background-color: grey; 
 
} 
 

 
#main .jumpDiv { 
 
    border-right: 1px solid; 
 
    border-bottom: 1px solid; 
 
    height: 245px; 
 
    width: 245px; 
 
    font-size: 20px; 
 
} 
 

 
#main .jumpDiv>div { 
 
    text-align: center; 
 
    background-color: #fee; 
 
    cursor: pointer; 
 
} 
 

 
.discountDiv { 
 
    text-align: center; 
 
    display: none; 
 
    border: 1px solid; 
 
    border-bottom-left-radius: 10px; 
 
    border-bottom-right-radius: 10px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<body> 
 
    <div id="main"> 
 
    <div class="jumpDiv"> 
 
     <div> Click Here</div> 
 
     <div class="discountDiv"> 
 

 
     </div> 
 
    </div> 
 
    <div class="jumpDiv"> 
 
     <div> Click Here</div> 
 
     <div class="discountDiv"> 
 

 
     </div> 
 
    </div> 
 
    <div class="jumpDiv"> 
 
     <div> Click Here</div> 
 
     <div class="discountDiv"> 
 

 
     </div> 
 
    </div> 
 
    <div class="jumpDiv"> 
 
     <div> Click Here</div> 
 
     <div class="discountDiv"> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> 
 
</body>

出典

2017-10-09 12:03:53

できるだけ簡単JS Fiddleを作りました。ここで

あなたが.on()かについての詳細を読むことができますについて.html()

今、あなたはあなたがクッキーやそのためのlocalStorageを使用することができ、最後のクリックされたIDを格納する必要がある場合。

出典

2017-10-09 13:32:25 Tibix

jQuery - 最後に選択した要素を見つける

答えて

関連する問題