Question

<div class="page-content">
  <div class="content-block">
    <div id="tab-holder" class="buttons-row">
      <a href="#tab1" class="tab-link active button">Tab 1</a>
      <a href="#tab2" class="tab-link button">Tab 2</a>
      <a href="#tab3" class="tab-link button">Tab 3</a>
    </div>
  </div>
</div>

我应该如何动态添加标签？

    <a href="#tab1" class="tab-link active button">Tab 1</a>

我做了这样的功能但没有工作：

function createTabButton(_holder, _text, _isActive) {
    var thm = $(`<a class="tab-link button ${_isActive ? 'active' : ''}">${_text}</a>`);
    _holder.append(thm);

    console.log(_text);
}

我错过了什么吗？

Answer 1

我只使用Dom7（framework7自己的dom操纵器），使用几乎与你相同的代码。

使用https://jsonplaceholder.typicode.com/作为示例

<div class="page-content">
  <div class="content-block">
    <div id="tab-holder" class="buttons-row">
      <a href="#tab1" class="tab-link active button">Tab 1</a>
      <a href="#tab2" class="tab-link button">Tab 2</a>
      <a href="#tab3" class="tab-link button">Tab 3</a>
    </div>
  </div>

  <button class="button">add</button>

</div>

Javascript - [使用模板字符串更新]

var myApp = new Framework7();

// Export selectors engine
var $$ = Dom7;


$$("#btnLoad").on('click', function() {

    $$.ajax({
        url: "https://jsonplaceholder.typicode.com/todos",
        data: {
            'userId': 1
        },
        type: 'GET',
      beforeSend: function(){
        $$("#btnLoad").text("Loading...");
      },
        success: function(data) {
            var list = JSON.parse(data);
            for (var i = 0; i < 5; i++) {
                createTabButton($$("#tab-holder"), list[i].id, list[i].completed);
            }
          $$("#btnLoad").text("Tabs Added");
        }
    });
});

function createTabButton(_holder, _text, _isActive) {
    //var thm = $$('<a class="tab-link button ' + (_isActive ? 'active' : '') + '">' + _text + '</a>');
      var thm = `<a class="tab-link button ${_isActive ? 'active' : ''}">${_text}</a>`;
     _holder.append(thm);

}

http://jsfiddle.net/alexprazeres11/0cwvejcx/76/

在Framework7 v1.4.2和1.6.4中测试过，它也可以在v2.0 +上运行。

动态添加标签项不能按预期工作

1 个答案: