javascript - jQuery + JSON - 在附加之前清除数据

标签 javascript jquery json custom-data-attribute

我在尝试根据匹配的数据属性附加新数据集之前清除数据时遇到问题。事情是这样的:

单击按钮 > 如果按钮的数据属性与 JSON 字段匹配，则使用这些项目填充菜单

它到目前为止正在工作，但我正在使用附加功能，它只是不断添加 - HTML 选项似乎不起作用，并且我之前尝试过使用 .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 文件中的信息显示音阶，从而隐藏/显示正确的音符集。

任何帮助将不胜感激!

最佳答案

看起来您混淆了附加事件和迭代内容的逻辑。如果我明白你想要做什么，这段代码应该会有所帮助。我不确定，因为每个按钮都有相同的输出。

$.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>');    
            }
        });
    })
});

这是代码笔 http://codepen.io/anon/pen/gmOjxV

关于javascript - jQuery + JSON - 在附加之前清除数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42428666/

上一篇：javascript - js 类中作为参数传递的函数 setTimeout 立即执行，并调用 setTimeout 中的类方法

下一篇：javascript - jQuery JSON 解析 - 对象元素

相关文章：

javascript - ECMA 和谐 – 回调到生成器

javascript - 我想为我的插件添加一个简单的 jquery slider

javascript - Bootstrap 轮播不会滚动/加载

json - 在 ELM 中链接 http 请求并合并 json 响应

java - Gson 预期为 BEGIN_ARRAY 但在第 1 行第 62 列为 STRING

ios - JSON 写入中的类型无效 (__SwiftValue)

javascript - 将参数 angularjs 传递给 javascript 函数

Javascript Jquery 添加样式表 IE

javascript - 在网站上加载外部页面的最佳实践

javascript - 使用 AJAX 和 Jquery 从服务器请求数据

©2024 IT工具网  联系我们