Question

我正在用jQuery和Ajax中的if else语句苦苦挣扎。如果要满足条件，我想通过其ID在html div中附加/显示一些数据。所以我有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 Switch语句吗？

预先感谢：）

Answer 1

遵循这些原则：

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);
    }
}

Answer 2

不确定要检索的数据的结构，您可能需要进行一些更改。但是，根据您的问题和提供的示例代码，以下是一些建议来简化代码并实现预期的结果：

不是为每个元素分配变量，而是向每个元素添加共享类（例如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>

If else语句jquery（附加到不同的选项卡）

2 个答案: