Question

我有一个html内容，由第三方工具修改。

html包含已更改/已删除的文本以及新文本。

示例：

html代码是这样的：

 //conection: 
                $link = mysqli_connect(env('DB_HOST'),env('DB_USERNAME'),env('DB_PASSWORD'),env('DB_DATABASE')) or die("Error " . mysqli_error($link)); 

                //consultation: 

                $query = "SELECT * FROM $mytable WHERE ts_activity>='$mins';" or die("Error in the consult.." . mysqli_error($link)); 

                //execute the query. 

                $result = mysqli_query($link, $query); 
                $count = 0;
                while($row = $result->fetch_assoc()) { 
                    if($count++==0){
                        $headerLine = implode(',', array_keys($row));                        
                        dump($headerLine);
                        if(!file_put_contents($filePath, $headerLine.PHP_EOL)){
                            throw new Exception("Cannot write FILE: {$filePath}");                    
                        }
                        continue;
                    }

                    foreach($row as $k=>$v){
                        if($row[$k] == '0000-00-00 00:00:00'){$row[$k] = '';}
                        $row[$k] = trim(str_replace(array(',', "\n", "\r"), ' ', $row[$k]));
                    }

                    //ADDs content to file
                    if(!file_put_contents($filePath, implode(',', $row).PHP_EOL, FILE_APPEND)){
                        throw new Exception("Cannot write FILE: {$filePath}");                    
                    }
                }

现在我需要实现一个显示/隐藏更改的按钮。

默认显示新内容，隐藏编辑/更改/删除的内容。
当用户点击显示/隐藏按钮时，显示已编辑/更改/删除，红色和删除线。新文本颜色为绿色。
当用户再次点击显示/隐藏按钮时，隐藏编辑/更改/删除的内容，新文本颜色为黑色。

以下是我的方法：jsFiddle

HTML：

for($Element=10; $Element <=20; $Element++)
       {
       $parse['tt_name'] = $lang['tech'][$Element]; // Displays the name
    }

<p class="ct_new">This is the new html content</p>
<p class="ct_changed">This is the old html content</p>

$('.ct-new').addClass('h-changes-new');
$('.ct_changed').addClass('h-changes');

$('#showChanges').click(function() {
  $('.ct_new').toggleClass('h-changes-new s-changes-new');
  $('.ct_changed').toggleClass('s-changes h-changes');
});

由于某种原因，我无法将文字设为绿色。我做错了什么？

Answer 1

这是选择器中的CSS优先级问题。黑色覆盖了绿色规则。您需要为绿色提供更具体的选择器

演示：http://jsfiddle.net/z2n4m1jv/1/

p.s-changes-new {
    color: #347C2C;
}

在规则中添加p，使其更具体，因此更具优先性

注意：您可以使用!important覆盖规则。但我强烈建议你不要使用它。这应该是你的最后一个选择

Answer 2

问题是，s-changes-new类不会覆盖color的{{1}}属性，并将其设置为黑色。

您可以通过将值设置为h-changes-new来强制执行颜色：

!important

这是小提琴：http://jsfiddle.net/oo8np8p3/

jQuery一键隐藏显示编辑/新内容

2 个答案: