Question

如何将不同的div样式应用于查询结果？

在结果列表中，我想根据内容设置div s的样式。

示例：在此结果列表中，我希望所有带有鸟类名称的结果与动物的div样式不同。

1. Cow
2. Hen
3. Chick
4. Goat
5. Lion
6. Duck

CSS：

.birds{
  background:yellow;
}

.animals{
  background:red;
}

非常具体：

聊天消息中的示例..您可以在发件人和收件人之间找到不同风格的消息。据我所知，他们根据标准获取了所有消息。我刚试了一次

if ($result->num_rows > 0) {
    // output data of each row

        while($row = $result->fetch_assoc()){

        echo  '<div id="listOfMessages" class="">'.$row["sender"].":".$row["entry"]."<hr>". $row["date"].'</div>'."<hr>"."<br>";
        echo "<script> applyStyle();</script>";

         }

} else {
    echo "You don't have any converstaion with this user... send the message to start conversation with him/her";
}

上面的代码给了我所有消息的列表，我添加了JS来设置div作为下面的js函数：

function applyStyle（）{

if($("#listOfMessages:contains('badshah')")){
$("#listOfMessages").addClass("sender");
}else{
$("#listOfMessages").addClass("receiver");
}
}

它只能用于第一个结果（消息），但所有以下消息都没有使用此功能设置样式。

谢谢！

Answer 1

＆＃13;

var animals = ["Cow", "Hen", "Chick", "Goat", "Lion", "Duck"];
var creatureMap = {
  "birds": ["Hen", "Chick", "Duck"],
  "animals": ["Cow", "Goat", "Lion"]
};

var classifications = {
  "Hen": "birds",
  "Chick": "birds",
  "Duck": "birds",
  "Cow": "animals",
  "Goat": "animals",
  "Lion": "animals"
};

function render(entries, keep) {
  var render = document.getElementById('render');

  if (keep) {
    render.innerHTML = '';
  }

  entries.forEach(function(entry) {
    var div = document.createElement("div");
    div.innerHTML = entry;
    div.className = classifications[entry] || "animals";
    render.appendChild(div);
  });
};

render(animals);

＆＃13;

.birds {
  background: yellow;
}

.animals {
  background: red;
}

＆＃13;

<div id = "render"></div>

＆＃13;

或者

＆＃13;

    .birds{
        background:yellow;
       }

     .animals{
      background:red;
    }

＆＃13;

<div class="animals">
    <div>Cow</div>
    <div class="birds">Hen</div>
    <div class="birds">Chick</div>
    <div>Goat</div>
    <div>Lion</div>
    <div class="birds">Duck</div>
    
</div>

＆＃13;

Answer 2

哇!!! ...我得到了解决方案

因为我的数据库表中有三列，例如下面的例子：

| 类型 | 群组 | record_date |
|猫|动物| 22-12-2017 |
|母鸡|鸟| 2017年12月9日|

我试过这样做......

if ($result->num_rows > 0) {
    // output data of each row

        while($row = $result->fetch_assoc()){

        if($row["group"]=="animal"){

        echo  '<div id="list" class="animals">'.$row["type"]."<hr>". $row["record_date"].'</div>'."<hr>"."<br>";
        }else{

        echo  '<div id="list" class="birds">'.$row["type"]."<hr>". $row["record_date"].'</div>'."<hr>"."<br>";
        }


         }

} else {
    echo "You don't have any animal/bird recorded";
}

它奏效了!!!

在查询结果中的列表元素中添加不同的类

2 个答案: