if else语句jquery(附加到不同的选项卡)

s6fujrry 于 2021-06-20 发布在 Mysql

关注(0)|答案(2)|浏览(348)

我在jquery和ajax中使用if-else语句。如果满足条件，我想通过html div的id在其中附加/显示一些数据。所以我有5个标签。我需要每个选项卡显示特定的数据，这些数据是通过ajax从php和mysql接收的。
首先我要做的是按id对结果进行排序，如下所示：

// Firstly I secure the data from the Ajax function is HTML.
var result = $.parseHTML(data);

// Then I define the individual results. This is achieved by filtering the class.
var tstab1 = $(result).filter(".tab1");
var tstab2 = $(result).filter(".tab2");
var tstab3 = $(result).filter(".tab3");
var tstab4 = $(result).filter(".tab4");
var tstab5 = $(result).filter(".tab5");

// What to show when condition wont be met
var error = $(result).filter(".tab-center");

现在我创建if else语句。

if(tstab1.length > 0 ){  // if the length is higher than 0 I want it to show the content
   $("#tab-content #tab1").html(tstab1);
} else if (tstab1.length === 0 ){ // if not it needs to show a message
   $("#tab-content #tab1").html(error);
}

这是完美的工作，但我不知道如何检查其余的tstab的在同一个功能？我需要使用某种javascript开关语句吗？
提前感谢：）

mysql php jquery ajax JavaScript

来源：https://stackoverflow.com/questions/51878246/if-else-statement-jquery-append-to-different-tabs

2条答案

按热度按时间

wd2eg0qa1#

沿着这些思路：

for(var i = 1; i <= 5; i++) {
    var tab = $(result).filter(".tab" + i);

    if (tab.length > 0) {
        $("#tab-content #tab" + i).html(tab);
    }
    else {
        $("#tab-content #tab" + i).html(error);
    }
}

赞(0）回复(0）举报 2021-06-20

dbf7pr2w2#

由于不确定要检索的数据的结构，可能需要进行一些更改。不过，根据您提出的问题和提供的示例代码，以下是一些建议，可用于折射代码并实现预期结果：
为每个元素添加一个共享类（例如tab），而不是为每个元素分配一个变量。
使用for循环遍历每个元素，如果需要，可以使用switch语句将不同的内容附加到dom中。但是，根据检索到的数据，可能有一种更动态的方法来实现这一点，而不需要使用switch或if/else语句。

// Select all elements with the tab class
const $tabs = $('.tab'); 

// Cycle through all elements with the same tab class
$tabs.each(function() {
  // Retreive id of item
  const id = $(this).attr('id'); 
  // You could use a switch statement to check id value and then append the content you want. In the example just appended, the id attr valure. 
  switch(id) { 
    case 'tab1': 
      $(this).append(id);
      break; 
    case 'tab2': 
      $(this).append(id);
      break; 
    case 'tab3': 
      $(this).append(id);
      break; 
    case 'tab4': 
      $(this).append(id);
      break; 
    default: 
      $(this).append('item'); 
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs">
  <li class="tab" id="tab1"> </li>
  <li class="tab" id="tab2"></li>
  <li class="tab" id="tab3"></li>
  <li class="tab" id="tab4"></li>
</ul>

赞(0）回复(0）举报 2021-06-20

我来回答

if else语句jquery(附加到不同的选项卡)

2条答案

相关问题

热门标签

最新问答