Question

我有一个页面，显示食物的详细信息。食物分为两类。这些是Maincat，subcat。

Maincat         Subcat              
Indian Food     north indian food   
Indian Food     south indian food   
Italian Food    Rolex Watch premier     
Italian Food    south italian food  
Rolex Watch premier     Rolex Watch

因此，通过此页面，当用户单击maincat值（这是一个按钮）时，它应该显示其所有特定的subcat值。例如

如果用户单击印度食品，则应显示印度食品的所有子类别。我已经引用了此链接enter link description here 我的代码是

<div id="up"><button class="previous round ar">&#x21EA;</button></div>
        <div  style="float: right; display: inline; padding-right: 100px;">
        <?php while($row2 = mysqli_fetch_array($result4)){ ?>
          <a href="food.php"><div class="filterDiv <?php echo $row2[mainName]; ?>">  <?php echo "$row2[name]"; ?> <img style="width: 50px; height: 50px;" src="maincat/<?php echo $row2['image']; ?>"> </div></a>


        <?php } ?>
        </div>
         <div id="parent" >
         <div id="myBtnContainer" style="display: inline;">
            <?php while($row1 = mysqli_fetch_array($result3)){ ?>
            <div class="child"> 
            <button class="btn draw-border" onclick="filterSelection('<?php echo $row1[3]; ?>')"><?php echo "$row1[0]"; ?><img style="width: 50px; height: 50px;" src="maincat/<?php echo $row1[1]; ?>"></button>
            <div class="divider"/>
            </div>
            <?php } ?>

         </div>

         </div>

         <div id="down"><button class="next round ar" style="float: left;">&#x21E9;</button></div>
    <div class="clearfix">
    </div>

</div>

我的脚本

<script>
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
  }
}

function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);     
    }
  }
  element.className = arr1.join(" ");
}

// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}
</script>

我的mysql查询

$sql3="SELECT a.name,a.image,b.image,b.name FROM food_main_cat a , food_sub_cat b WHERE b.mainName=a.name GROUP BY(a.name) ";
$result3=mysqli_query($cn,$sql3);

$sql4="SELECT * FROM `food_sub_cat`";
$result4=mysqli_query($cn,$sql4);

我的问题是subcat没有显示。

Answer 1

这是我的看法。我试图简化它。我以您链接到的示例为例。我没有使用类，而是使用了数据属性。

doFilter( 'all' );
// Add active class to the current button (highlight it)
var btns = document.getElementsByClassName("btn");

for ( btn of btns ) {

  btn.addEventListener("click", function(){
  
    let current = document.getElementsByClassName("active");
    current[0].classList.remove("active");
    this.className += " active";
    
    let target = this.getAttribute('data-target');
    
    doFilter( target );
    
  });
}

function doFilter( target ) {
  
  let filterDivs = document.getElementsByClassName('filterDiv');
  
  for( fDiv of filterDivs ){
    
    let currentDiv = fDiv;
        
    if( target == 'all' ){
      currentDiv.className += ' show';
    } else {
      
      let filterTargets = currentDiv.getAttribute('data-target').split(' ');
      currentDiv.classList.remove('show');
      for( filterTarget of filterTargets ){
        if( filterTarget == target ){
          currentDiv.className += ' show';
        } 
      }
      
    }
   
  }

}

.filterDiv {
  float: left;
  background-color: #2196F3;
  color: #ffffff;
  width: 100px;
  line-height: 100px;
  text-align: center;
  margin: 2px;
  display: none;
}

.show {
  display: block;
}

.container {
  margin-top: 20px;
  overflow: hidden;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}

.btn:hover {
  background-color: #ddd;
}

.btn.active {
  background-color: #666;
  color: white;
}

<h2>Filter DIV Elements</h2>

<div id="myBtnContainer">
  <button class="btn active" data-target="all"> Show all</button>
  <button class="btn" data-target="cars"> Cars</button>
  <button class="btn" data-target="animals"> Animals</button>
  <button class="btn" data-target="fruits"> Fruits</button>
  <button class="btn" data-target="colors"> Colors</button>
</div>

<div class="container">
  <div class="filterDiv" data-target="cars">BMW</div>
  <div class="filterDiv" data-target="colors fruits">Orange</div>
  <div class="filterDiv" data-target="cars">Volvo</div>
  <div class="filterDiv" data-target="colors">Red</div>
  <div class="filterDiv" data-target="cars animals">Mustang</div>
  <div class="filterDiv" data-target="colors">Blue</div>
  <div class="filterDiv" data-target="animals">Cat</div>
  <div class="filterDiv" data-target="animals">Dog</div>
  <div class="filterDiv" data-target="fruits">Melon</div>
  <div class="filterDiv" data-target="fruits animals">Kiwi</div>
  <div class="filterDiv" data-target="fruits">Banana</div>
  <div class="filterDiv" data-target="fruits">Lemon</div>
  <div class="filterDiv" data-target="animals">Cow</div>
</div>

如何根据按钮值从数据库中检索数据

1 个答案: