如果value为true,则为每个项添加类

时间:2018-04-02 16:28:45

标签: php jquery mysql methods vue.js

帮助我遇到严重问题我试图从mysql查询中获取所有结果并显示它们。对于每个结果if Automotive = 1我想在一个名为automotive的段落标记中添加一个类。如果Gaming = 1我想添加一个名为game的课程。一些结果将汽车和游戏设置为一个。在这种情况下,我想将两个类添加到元素中。我怎么在PHP中这样做?我一直存在的问题是,有些元素正在获得他们不应该拥有的课程。它似乎为每个项目添加相同的类。即使他们没有一个价值。再次为每个结果检查以查看Gaming是否为1并将Gaming类添加到段落中。如果Automotive = 1,则将Automotive类添加到段落中,如果两个类都为1,则将它们两者相加,依此类推。我需要这些类来工作,所以我可以在jquery / vuejs中有条件地显示和隐藏它们。继承人的代码。

<?php require_once('init.php');

$query="SELECT * FROM `bannerStock`";
$result = mysqli_query($db_conx, $query);
while($row=mysqli_fetch_assoc($result)) {
         $categorytoadd="";
      if($row['Automotive']==1){$categorytoadd.=' Automotive';}
                                if($row['Backgrounds']==1){$categorytoadd.=' Backgrounds';}
                                if($row['Church']==1){$categorytoadd.=' Church';}
                                if($row['Community']==1){$categorytoadd.=' Community';}
                                if($row['Money']==1){$categorytoadd.=' Money';}
                                if($row['Food']==1){$categorytoadd.=' Food';}
                                if($row['Gaming']==1){$categorytoadd.=' Gaming';}
                                if($row['Healthcare']==1){$categorytoadd.=' Healthcare';}
                                if($row['Holidays']==1){$categorytoadd.=' Holidays';}
                                if($row['Sports']==1){$categorytoadd.=' Sports';}
                                if($row['Patriotic']==1){$categorytoadd.=' Patriotic';}
                                if($row['Retail']==1){$categorytoadd.=' Retail';}
                                if($row['Education']==1){$categorytoadd.=' Education';}
                                if($row['Misc']==1){$categorytoadd.=' Misc';}
    $myArray[] = $row;
}
?>

<!doctype html>
<html>
<head>
  <script src="https://unpkg.com/vue"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <div id="app">
      <input type='text' v-model='keyword' placeholder='search item'>
  <button>ALL</button>
      <button v-on:click="showgaming">Gaming</button>
      <button v-on:click="showchurch">Church</button>
      <button v-on:click="showauto">Auto</button>
      <div v-for="item in filteredItemList">
<p class="video <?php echo $categorytoadd; ?>">{{item.name_short}}</p>
    </div>
  </div>
  <script>
  var app = new Vue({
    el: '#app',
    data: {
      itemList: [],
        keyword:'',
        showall:'0',
    },
    created: function() {
        this.loaddata();
    },
    methods: {
            loaddata: function(){
                  var vueapp = this;
                        vueapp.itemList = <?php echo json_encode($myArray, JSON_PRETTY_PRINT); ?>;
                },
        showgaming: function(){
            $('.video:not(.Gaming)').hide();
        },
                showauto: function(){
            $('.video:not(.Automotive)').hide();
        },
                        showchurch: function(){
            $('.video:not(.Church)').hide();
        },
    },
        computed:{
    filteredItemList(){
      return this.itemList.filter((item) => {
        return item.name_short.toLowerCase().includes(this.keyword.toLowerCase());
      });
    },
  }
  });
  </script>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

1)在while之外定义$ myArray:

$myArray = [];

2)将类添加到行本身并将其推送到数组(这会在内部进行):

$row['class'] = $categorytoadd;
array_push($myArray, $row);

3)最后,在显示项目时使用行类:

<p :class="['video', item.class]">{{ item.name_short }}</p>