jQuery + JSON - 追加前のデータをクリアする

Question

データの一致に基づいて新しいセットを追加する前にデータをクリアしようとして問題が発生しました。それは、これまで働いているが、私はアペンド機能を使用していますし、それだけで追加し続ける

ボタンのデータ属性は、JSONフィールドと一致した場合、それらの項目をメニューに移入>

クリックボタン：次のようにそれを行きます - HTMLオプションが機能していないように見えて、append関数の前に.HTML（ ''）を使ってdivの内容をクリアしようとしましたが、動作しませんでした。私はかなり愚かですが、彼らが何をしているかを知っている誰かが同じルートを試みるなら、それはうまくいくかもしれません。

これは、JSONファイルです：https://api.myjson.com/bins/non2t.json

そして、ここのコードです：すべての書式については申し訳ありません

$.getJSON("https://api.myjson.com/bins/non2t.json", function(data) { 
 
    console.log(data); 
 
    $.each(data,function(i,data){ 
 
    $('.main-btn').on("click", function() { 
 
     var scale = $(this).data('scale') 
 
    if (scale == data.root) { 
 
$('#total-scale-men').append('<button>' + data.scale + '</button>'); } 
 
    }) 
 
      }); 
 
}); 
 

 
$('.scales-men').show();

.scales-men {z-index:1000; position:absolute; top:12%; left:1px; height:calc(88% - 2px); width:calc(100% - 2px); border-radius:20px; background:rgba(255,255,255,.8); overflow:scroll; text-align:center; display:none;} 
 
.scales-men div {padding:5px 0;} 
 
/* 
 
https://api.myjson.com/bins/non2t.json 
 
*/ 
 

 
#gcWindow {width:100%;height:382px;margin:0;padding:0;} 
 

 
#gcWrap {position:absolute;left:calc(50% - (781px/2));font-family:Lato;font-size:20px;} 
 
#gcFretboard {border:1px #666 solid; border-radius:20px; width:781px; height:380px; margin-left:auto;margin-right:auto; background-image:url('https://www.electricherald.com/chordindex/img/bg.jpg'); background-position:0px 66px;background-size:contain;background-repeat:no-repeat;} 
 

 
#gcFretboard > div.gcSubMen > ul >li {margin:0;padding:0;} 
 

 
button {display:inline-block; z-index:1000; margin:6px 0px 2px 4px; height:23px; line-height:16px; background:#fff; border:1px #666 solid; border-radius:4px; outline:none; cursor:pointer; box-shadow:1px 1px 1px #ccc; font-weight:bold;color:#666; 
 
-webkit-transition: all .2s ease; 
 
-moz-transition: all .2s ease; 
 
-ms-transition: all .2s ease; 
 
-o-transition: all .2s ease; 
 
transition: all .2s ease;} 
 
button:hover {color:#c44c4c;border:1px #c44c4c solid;box-shadow:1px 1px 1px #888;} 
 
button:active {box-shadow:1px 1px 1px #888 inset;} 
 
button sup, button sub {font-size:70%;} 
 
#gcFretboard > div.gcSubMen > ul > li > button {font-weight:normal;} 
 
#gcFretboard > div.gcMen > ul > li > button {width:48px;} 
 

 
.gcMen {z-index:500; width:100%; position:absolute; text-align:center; top:4px;} 
 
.gcSubMen {z-index:500; position:absolute; background:rgba(255,255,255,.9); width:779px; border-radius:20px; top:35px;} 
 
.chords-menu {margin:0;padding:0;} 
 
.chords-subgroups {margin:4px 0 0 0;padding:0;border-top:1px #fafafa dashed;} 
 

 
.chords-menu li { 
 
    display: inline-block; 
 
    } 
 
.chords-subgroups li { 
 
    display: inline-block; 
 
    } 
 

 
#inf {width:781px; position:absolute; bottom:0px;} 
 
#gcInfTit {position:absolute; width:781px; height:10px; bottom:34px;} 
 
#gcInfTit div {float:left;text-align:left;font-size:10px;line-height:10px;padding-left:10px;margin:0;color:#ccc;} 
 
#tit1 {width:calc(33% - 10px);} 
 
#tit2 {width:calc(33% - 10px);} 
 
#tit3 {width:calc(33% - 10px);} 
 
.gcNAI {float:left; height:30px; color:#c44c4c;text-align:center;font-size:14px;font-weight:bold;} 
 

 

 
.gcbg {background-size:contain; background-repeat:no-repeat;} 
 
.gc-string {position:absolute; width:781px; height:16px;} 
 
#gc-string-E {top:189px; 
 
-moz-transform: rotate(.6deg); 
 
-webkit-transform: rotate(.6deg); 
 
-o-transform: rotate(.6deg); 
 
-ms-transform: rotate(.6deg); 
 
transform: rotate(.6deg); 
 
} 
 
#gc-string-A {top:171px; 
 
-moz-transform: rotate(.28deg); 
 
-webkit-transform: rotate(.28deg); 
 
-o-transform: rotate(.28deg); 
 
-ms-transform: rotate(.28deg); 
 
    transform: rotate(.28deg);} 
 
#gc-string-D {top:153px; 
 
-moz-transform: rotate(-.02deg); 
 
-webkit-transform: rotate(-.02deg); 
 
-o-transform: rotate(-.02deg); 
 
-ms-transform: rotate(-.02deg); 
 
    transform: rotate(-.02deg);} 
 
#gc-string-G {top:136px; 
 
-moz-transform: rotate(-.25deg); 
 
-webkit-transform: rotate(-.25deg); 
 
-o-transform: rotate(-.25deg); 
 
-ms-transform: rotate(-.25deg); 
 
    transform: rotate(-.25deg);} 
 
#gc-string-B {top:119px; 
 
-moz-transform: rotate(-.55deg); 
 
-webkit-transform: rotate(-.55deg); 
 
-o-transform: rotate(-.55deg); 
 
-ms-transform: rotate(-.55deg); 
 
    transform: rotate(-.55deg);} 
 
#gc-string-E2 {top:101px; 
 
-moz-transform: rotate(-.95deg); 
 
-webkit-transform: rotate(-.95deg); 
 
-o-transform: rotate(-.95deg); 
 
-ms-transform: rotate(-.95deg); 
 
    transform: rotate(-.95deg);} 
 

 
.fret-0 {left:0;} 
 
.fret-1 {left:42px;} 
 
.fret-2 {left:119px;} 
 
.fret-3 {left:190px;} 
 
.fret-4 {left:257px;} 
 
.fret-5 {left:321px;} 
 
.fret-6 {left:378px;} 
 
.fret-7 {left:434px;} 
 
.fret-8 {left:486px;} 
 
.fret-9 {left:536px;} 
 
.fret-10 {left:582px;} 
 
.fret-11 {left:627px;} 
 
.fret-12 {left:669px;} 
 
.fret-13 {left:710px;} 
 
.fret-14 {left:747px;} 
 

 
.X {background-image:url('https://www.electricherald.com/chordindex/img/X.png');} 
 
.A {background-image:url('https://www.electricherald.com/chordindex/img/A.png');} 
 
.As {background-image:url('https://www.electricherald.com/chordindex/img/As.png');} 
 
.B {background-image:url('https://www.electricherald.com/chordindex/img/B.png');} 
 
.C {background-image:url('https://www.electricherald.com/chordindex/img/C.png');} 
 
.Cs {background-image:url('https://www.electricherald.com/chordindex/img/Cs.png');} 
 
.D {background-image:url('https://www.electricherald.com/chordindex/img/D.png');} 
 
.Ds {background-image:url('https://www.electricherald.com/chordindex/img/Ds.png');} 
 
.E {background-image:url('https://www.electricherald.com/chordindex/img/E.png');} 
 
.F {background-image:url('https://www.electricherald.com/chordindex/img/F.png');} 
 
.Fs {background-image:url('https://www.electricherald.com/chordindex/img/Fs.png');} 
 
.G {background-image:url('https://www.electricherald.com/chordindex/img/G.png');} 
 
.Gs {background-image:url('https://www.electricherald.com/chordindex/img/Gs.png');} 
 

 
.nt {position:absolute; height:16px; width:16px; z-index:1000; background-size:contain;background-repeat:no-repeat;} 
 
.inv {opacity:1;} 
 
.gcop {opacity:1;} 
 
.trans { 
 
-webkit-transition: all 1s ease; 
 
-moz-transition: all 1s ease; 
 
-ms-transition: all 1s ease; 
 
-o-transition: all 1s ease; 
 
transition: all 1s ease; 
 
} 
 
#gc-cw {font-family:lato; position:absolute; top:0; left:20px; font-size:10px;} 
 
#gc-cw a {text-decoration:none; color:#000; display:block; margin-top:8px; width:100%;text-align:center; 
 
-webkit-transition: all .2s ease; 
 
-moz-transition: all .2s ease; 
 
-ms-transition: all .2s ease; 
 
-o-transition: all .2s ease; 
 
transition: all .2s ease;} 
 
#gc-cw a:hover {outline:10px #fff solid;color:#c44c4c;} 
 
#gc-cw a:active {outline:1px #f00 solid;} 
 
#gc-cw a span {font-weight:bold;font-size:11px;line-height:11px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="gcWindow"> 
 
<div id="gcWrap"> 
 
    <div id="men-A" class="scales-men"><div></div></div> 
 
    <div id="total-scale-men" class="scales-men"></div> 
 
    <div id="gcFretboard"> 
 
    <div class="gcMen"> 
 
    <ul class="chords-menu"> 
 
    <li><button data-scale="A" class="main-btn">A</button></li> 
 
    <li><button data-scale="A#/Bb" class="main-btn">A#</button></li> 
 
    <li><button data-scale="B" class="main-btn">B</button></li> 
 
    <li><button data-scale="C" class="main-btn">C</button></li> 
 
    <li><button data-scale="C#/Db" class="main-btn">C#</button></li> 
 
    <li><button data-scale="D" class="main-btn">D</button></li> 
 
    <li><button data-scale="D#/Eb" class="main-btn">D#</button></li> 
 
    <li><button data-scale="E" class="main-btn">E</button></li> 
 
    <li><button data-scale="F" class="main-btn">F</button></li> 
 
    <li><button data-scale="F#/Gb" class="main-btn">F#</button></li> 
 
    <li><button data-scale="G" class="main-btn">G</button></li> 
 
    <li><button data-scale="G#/Ab" class="main-btn">G#</button></li> 
 
</ul></div> 
 
<div class="gcSubMen"> 
 
    <ul class="chords-subgroups"> 
 
</ul> 
 
    </div> 
 

 
    <div id="gc-string-E" class="gc-string"> 
 
     <div class="nt inv fret-0 E"></div> 
 
     <div class="nt inv fret-1 F"></div> 
 
     <div class="nt inv fret-2 Fs"></div> 
 
     <div class="nt inv fret-3 G"></div> 
 
     <div class="nt inv fret-4 Gs"></div> 
 
     <div class="nt inv fret-5 A"></div> 
 
     <div class="nt inv fret-6 As"></div> 
 
     <div class="nt inv fret-7 B"></div> 
 
     <div class="nt inv fret-8 C"></div> 
 
     <div class="nt inv fret-9 Cs"></div> 
 
     <div class="nt inv fret-10 D"></div> 
 
     <div class="nt inv fret-11 Ds"></div> 
 
     <div class="nt inv fret-12 E"></div> 
 
     <div class="nt inv fret-13 F"></div> 
 
     <div class="nt inv fret-14 Fs"></div> 
 
    </div> 
 
    <div id="gc-string-A" class="gc-string"> 
 
     <div class="nt inv fret-0 A"></div> 
 
     <div class="nt inv fret-1 As"></div> 
 
     <div class="nt inv fret-2 B"></div> 
 
     <div class="nt inv fret-3 C"></div> 
 
     <div class="nt inv fret-4 Cs"></div> 
 
     <div class="nt inv fret-5 D"></div> 
 
     <div class="nt inv fret-6 Ds"></div> 
 
     <div class="nt inv fret-7 E"></div> 
 
     <div class="nt inv fret-8 F"></div> 
 
     <div class="nt inv fret-9 Fs"></div> 
 
     <div class="nt inv fret-10 G"></div> 
 
     <div class="nt inv fret-11 Gs"></div> 
 
     <div class="nt inv fret-12 A"></div> 
 
     <div class="nt inv fret-13 As"></div> 
 
     <div class="nt inv fret-14 B"></div> 
 
    </div> 
 
    <div id="gc-string-D" class="gc-string"> 
 
     <div class="nt inv fret-0 D"></div> 
 
     <div class="nt inv fret-1 Ds"></div> 
 
     <div class="nt inv fret-2 E"></div> 
 
     <div class="nt inv fret-3 F"></div> 
 
     <div class="nt inv fret-4 Fs"></div> 
 
     <div class="nt inv fret-5 G"></div> 
 
     <div class="nt inv fret-6 Gs"></div> 
 
     <div class="nt inv fret-7 A"></div> 
 
     <div class="nt inv fret-8 As"></div> 
 
     <div class="nt inv fret-9 B"></div> 
 
     <div class="nt inv fret-10 C"></div> 
 
     <div class="nt inv fret-11 Cs"></div> 
 
     <div class="nt inv fret-12 D"></div> 
 
     <div class="nt inv fret-13 Ds"></div> 
 
     <div class="nt inv fret-14 E"></div> 
 
    </div> 
 
    <div id="gc-string-G" class="gc-string"> 
 
     <div class="nt inv fret-0 G"></div> 
 
     <div class="nt inv fret-1 Gs"></div> 
 
     <div class="nt inv fret-2 A"></div> 
 
     <div class="nt inv fret-3 As"></div> 
 
     <div class="nt inv fret-4 B"></div> 
 
     <div class="nt inv fret-5 C"></div> 
 
     <div class="nt inv fret-6 Cs"></div> 
 
     <div class="nt inv fret-7 D"></div> 
 
     <div class="nt inv fret-8 Ds"></div> 
 
     <div class="nt inv fret-9 E"></div> 
 
     <div class="nt inv fret-10 F"></div> 
 
     <div class="nt inv fret-11 Fs"></div> 
 
     <div class="nt inv fret-12 G"></div> 
 
     <div class="nt inv fret-13 Gs"></div> 
 
     <div class="nt inv fret-14 A"></div> 
 
    </div> 
 
    <div id="gc-string-B" class="gc-string"> 
 
     <div class="nt inv fret-0 B"></div> 
 
     <div class="nt inv fret-1 C"></div> 
 
     <div class="nt inv fret-2 Cs"></div> 
 
     <div class="nt inv fret-3 D"></div> 
 
     <div class="nt inv fret-4 Ds"></div> 
 
     <div class="nt inv fret-5 E"></div> 
 
     <div class="nt inv fret-6 F"></div> 
 
     <div class="nt inv fret-7 Fs"></div> 
 
     <div class="nt inv fret-8 G"></div> 
 
     <div class="nt inv fret-9 Gs"></div> 
 
     <div class="nt inv fret-10 A"></div> 
 
     <div class="nt inv fret-11 As"></div> 
 
     <div class="nt inv fret-12 B"></div> 
 
     <div class="nt inv fret-13 C"></div> 
 
     <div class="nt inv fret-14 Cs"></div> 
 
    </div> 
 
    <div id="gc-string-E2" class="gc-string"> 
 
     <div class="nt inv fret-0 E"></div> 
 
     <div class="nt inv fret-1 F"></div> 
 
     <div class="nt inv fret-2 Fs"></div> 
 
     <div class="nt inv fret-3 G"></div> 
 
     <div class="nt inv fret-4 Gs"></div> 
 
     <div class="nt inv fret-5 A"></div> 
 
     <div class="nt inv fret-6 As"></div> 
 
     <div class="nt inv fret-7 B"></div> 
 
     <div class="nt inv fret-8 C"></div> 
 
     <div class="nt inv fret-9 Cs"></div> 
 
     <div class="nt inv fret-10 D"></div> 
 
     <div class="nt inv fret-11 Ds"></div> 
 
     <div class="nt inv fret-12 E"></div> 
 
     <div class="nt inv fret-13 F"></div> 
 
     <div class="nt inv fret-14 Fs"></div> 
 
</div> 
 
    
 
<div class="chord"> 
 
    <div id='gcInfTit'><div id="tit1">ROOT</div><div id="tit2">SCALE</div><div id="tit3">STRUCTURE</div></div> 
 
    <div id="inf"></div> 
 
</div> 
 
    </div> 
 
    
 
</div> <!---gcWrap---> 
 
</div> <!---gcWindow--->

が、codepenで見ることが容易になることがあります。http://codepen.io/JTBennett/pen/NdLWJy

とにかく、最終的なアイデアは情報に基づいて表示するためのスケールを得ることです正しい音符のセットを表示/非表示にするJSONファイルで

ご協力いただければ幸いです！

Answer 1

が見えます。あなたがしようとしていることを理解すれば、このコードは助けになるはずです。すべてのボタンが同じ出力を持っているのでわからない。

$.getJSON("https://api.myjson.com/bins/non2t.json", function(data) { 
    $('.main-btn').on("click", function() { 
    $('#total-scale-men').empty(); 
    console.log("emptied total-scale-men"); 
    $('.scales-men').show() 
     var scale = $(this).data('scale') 
     $.each(data,function(i,data){ 
      if (scale == data.root) { 
       $('#total-scale-men').append('<button>' + data.scale + '</button>');  
      } 
     }); 
    }) 
}); 

ここでおそらくcodepen http://codepen.io/anon/pen/gmOjxV

Answer 2

は

$('.main-btn').on("click", function() { 

した後は、イベントを取り付けるための混ぜロジックを持って、何を反復処理するように、この

$('#total-scale-men').empty(); 

Answer 3

ですか？

A.）

jQuery('.sample div').html(''); 

B.）

jQuery('.sample div').empty();