2017-05-24 9 views
0

これに関連するすべての質問を検索しましたが、テキストを変更できないようです。ここでアイテムがクリックされたときにnavbarドロップダウンのタイトルは変更されません

が問題のドロップダウンです:

がMarketsource

<div class="collapse navbar-collapse" id="navbarsExampleDefault"> 
    <ul class="nav navbar-nav"> 


    <!--First Dropdown - This needs to be fixed. Should change the text when clicked to the store that was selected.--> 
    <li class="nav-item dropdown"> 
     <a class="nav-link dropdown-toggle" id="dropdown01" data-toggle="dropdown" 
     aria-haspopup="true" aria-expanded="false"><span id="StoreType">Store Type</span></a> 
     <div id="dropdownStore" class="dropdown-menu" aria-labelledby="dropdown01"> 
     <a class="dropdown-item" id="100" onclick="setStoreType(100);" >Best Buy</a> 
     <a class="dropdown-item" id="101" onclick="setStoreType(101);" >Office Deopt</a> 
     <a class="dropdown-item" id="102" onclick="setStoreType(102);" >Office Max</a> 
     <a class="dropdown-item" id="103" onclick="setStoreType(103);" >Staples</a> 
     <a class="dropdown-item" id="104" onclick="setStoreType(104);" >Costco</a> 
     </div> 
    </li> 

私はそれを設定している方法は、現在かなりいずれにもマッチしていないようですので、私は、ナビゲーションバーのパーツが含まれて私が見た例のうちの一つです。私は(私は似たようにかなりの数の変化を経てきた)、今持っている

Javascriptを:

//Dropdown toggle 
$(".dropdown-menu a").click(function(){ 
$(this).closest('.dropdown-item').children('a').text($(this).text()) 
}); 

誰かが私の問題で私を助けることはできますか?それは非常に重要ではありませんが、それはこのwebappに少し応答性を与えるものです。

ありがとうございました!

EDIT:

私はこれを尋ねたので、それは少しをされている実感が、私はまだそれが仕事を得ることができませんでした。 JS:私はここにGithubの要旨に必要な2つのファイルを置くhttps://gist.github.com/ChristopherBare/bd29ba9bc4ffea9953c3039acc03f81d HTML:それで起こっていただきました!私は知らないhttps://gist.github.com/ChristopherBare/b2770b00881b978af3b666ba67c0e4b1

。誰かがファイルを見渡し、私がどこに間違っていたか教えてくれれば、それは大いに役立つだろう。

P.S. JSにはまだ何もしていない機能がいくつかあります。なぜなら、それらはまだ完了していないからです。だから今は無視してください。

答えて

1

問題はここにある:

$(this).closest('.dropdown-item').children('a').text($(this).text()); 

と番目のHTMLは次のようである:ここ

<div id="dropdownStore" class="dropdown-menu" aria-labelledby="dropdown01"> 
    <a class="dropdown-item" id="100" onclick="setStoreType(100);" >Best Buy</a> 

.dropdown-item.dropdown-menu下にあり、あなたが上向きにDOMを検索closest()セレクタを使用しています。 closestの代わりにfind()を試して、.children('a')を削除してください。.dropdown-itemはそれ自体アンカーです。

+0

すばやく返信いただきありがとうございます。 –

+0

私は変更を実装しましたが、変更はまだありません。これは私が変更したものです: '//ドロップダウントグル $("。ドロップダウンメニューa ")をクリックしてください($(this).find( '.downdown-item') .text($(this).text()) }); ' –

0

ない、これはあなたが探しているが、あなたは、単にその余分setStoreType機能せずにそれを行うことができるものであるか確認します。(私はあなたが私はそれをスキップしてその機能をやろうとしているかわからないけれども。)

リンクの中のテキストではなく店舗の種類としてidを使用したい場合は、後でそれを追加できます。

//Dropdown toggle 
 
/* 
 
$(".dropdown-menu a").click(function(){ 
 
$(this).closest('.dropdown-item').children('a').text($(this).text()) 
 
}); 
 
*/ 
 

 
function setStoreType(){ 
 
    
 
} 
 

 
//Dropdown toggle 
 
$(".dropdown-item").on("click", function(){ 
 
$("#StoreType").text($(this).text()); 
 
});
.dropdown-item:hover { 
 
    cursor: pointer; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="collapse navbar-collapse" id="navbarsExampleDefault"> 
 
    <ul class="nav navbar-nav"> 
 

 

 
    <!--First Dropdown - This needs to be fixed. Should change the text when clicked to the store that was selected.--> 
 
    <li class="nav-item dropdown"> 
 
     <a class="nav-link dropdown-toggle" id="dropdown01" data-toggle="dropdown" 
 
     aria-haspopup="true" aria-expanded="false"><span id="StoreType">Store Type</span></a> 
 
     <div id="dropdownStore" class="dropdown-menu" aria-labelledby="dropdown01"> 
 
     <a class="dropdown-item" id="100">Best Buy</a> 
 
     <a class="dropdown-item" id="101">Office Deopt</a> 
 
     <a class="dropdown-item" id="102">Office Max</a> 
 
     <a class="dropdown-item" id="103">Staples</a> 
 
     <a class="dropdown-item" id="104">Costco</a> 
 
     </div> 
 
    </li>

+0

私は近づいているように感じます。私が望むのは、ボタンのテキストをドロップダウンでクリックしたものに変更することだけです。また、jQueryをインポートしていないこともわかりました。私はそのすべてを行い、そこにあなたが持っているものを挿入しました。それだけで変更されません。私は理由を理解できない。 –

+0

setStoreType()関数は、モーダル内のテキストを別のものに設定します。 –

+0

私の例のテキストをクリックすると、そこの一番上の項目のテキストが変更されます。 – Icewine

0

私はまだこの問題に対する答えを見つけることができます。私はコードのすべてがそこにあるようにいくつかのgithub要旨を投稿しました。これは、jQueryが正しく動作しない場合や、ドロップダウンがフォーマットされている可能性があります。

+0

これは質問に答えません。質問に回答する際のガイドライン(こちら)をご覧ください(https://stackoverflow.com/help/how-to-ask) – klinger

関連する問題