添加从JavaScript的HTML内容，并改变它在按钮的HTML点击

我在网上twitch.tv工作流，并且我试着：添加从JavaScript的HTML内容，并改变它在按钮的HTML点击

要在前面的HTML代码from javascript in HTML

将javascript中调用的内容放入id =“followerInfo”的div中，并且每次按下按钮时都会更改内容（取决于按钮所调用的数据类型）

。当我全部按下按钮时，它必须向我显示所有电视流，同样适用于在线 - 在线视频流，也适用于使用离线视频btn

。而最重要的，了解我在做什么在这里，不仅可以复制粘贴代码...

我呆在这里。我是一个自学成才的（试着'成为程序员），并隐含在这个领域的新手，但我想学习，这就是为什么我要求你提供一些帮助，如果你还可以解释一下如何去做。

<div class="row second text-center"> 

    <div class="col-md-4 btn btn-info" id="all"> 
     All 
    </div> <!-- Online --> 
    <div class="col-md-4 btn btn-success" id="online"> 
     Online 
    </div> <!-- Online --> 
    <div class="col-md-4 btn btn-danger" id="offline"> 
     Offline 
    </div> <!-- Offline --> 

    </div> 

    <div id="followerInfo" style="margin-top:50px;"> 
    </div>

的按钮所有

$("#followerInfo").prepend("<div class='row'>" + "<div class='col-md-4'>" + "<a href='" + ur_l + "' target='_blank'><img src='" + logo + "'></a>" + "</div>" + "<div class='col-md-4'>" + name + "</div>" + "<div class='col-md-4'>" + status + "</div></div>");

的按钮离线

$("#followerInfo").prepend("<div class='row'>" + "<div class='col-md-4'>" + "<a href='" + ur_l + "' target='_blank'><img src='" + logo + "'></a>" + "</div>" + "<div class='col-md-4'>" + name + "</div>" + "<div class='col-md-4'>" + status + "</div></div>");

的按钮在线

$("#followerInfo").prepend("<div class='row'>" + 
    "<div class='col-md-4'>" + "<a href='" + ur_l + 
    "' target='_blank'><img src='" + logo + "'></a>" + 
    "</div>" + 
    "<div class='col-md-4'>" + name + "</div>" + 
    "<div class='col-md-4'>" + status + "</div></div>");

如果它会帮助你更好地理解我的代码，这里是代码链接

http://codepen.io/queky18/pen/BzbpwV

来源

2016-08-18 Adrian Gheorghe

我可以建议你使用Google一个方向：的addEventListener，使用appendChild。 – Lazyexpert

我认为这可能会被重新考虑，你可以做的只是一次调用api获取所有数据并在第一次加载时将其附加到页面上，然后当你点击“离线”按钮时你会检查最后一列中的文本，如果它不是'=='脱机，那么你可以使用'.hide（）;'将它设置为不显示任何内容。 –

我很好奇在这种情况下找到一种方法。我会尝试你告诉我的更聪明的方式......但是如果我能在这个例子中找到方法，它会解开许多好奇心 –

$('.second div').on('click', function(e) { 

     e.preventDefault(); 

     var status = $(this).attr('id'), // get the id of the status button clicked on. 
      followerRow = $('#followerInfo .row'), 
      statusColumn = $('#followerInfo .col-md-4:last-child'); 

    statusColumn.each(function(){// check the text in the last column of each row 

      if (status == "all") { // for the show all button. 
       followerRow.show(); 
      } else { 
       if ($(this).text().toLowerCase() != status) { // convert text to lowercase and compare with status 
        $(this).parent().hide(); // gets the parent div of the last column, which would be the row and hide it. 
       } else { 
        $(this).parent().show(); // otherwise we show the row. 
       } 
      } 
     }); 
    });

这应该与当前的代码工作，但如前所述，它可能是值得的经历，如果你开始看到重复重新因子代码的时间。

在这里看到一个更新版本 - http://codepen.io/anon/pen/PzLALa

来源

2016-08-18 10:26:19

谢谢尼克R！在几天之内，我会回过头来看这个代码的更新版本。 –

添加从JavaScript的HTML内容，并改变它在按钮的HTML点击

回答

相关问题