Question

所以我正在创建一个页面，其中动态创建具有“问题”和“答案”类的元素，并且它们在另一个内部出现（因此第一个问题div包含答案div，其中包含以下问题，因此on），我希望它们有不同的边框颜色，例如红色一个用于问题，蓝色一个用于答案，但我不能在我的.css文件中写入border-color属性，因为所有内容都是递归显示的，最后一次写入属性因此适用于所有元素。可能是什么解决方案？

它看起来像这样：

<div class="management">
        <button class="btn btn-primary addtree" type="button">Add new tree</button>
        <ul>
            <div id="new"></div>            
        </ul>
    </div>

<script>
    $(document).ready(function(){
        var ident = 0;
        var question;
        var answer;
        $.get('question', function(data){
                question = data;
        });
        $.get('answer', function(data){
                answer = data;
        });

        $(".management").on("click", ".addtree", function(){
            ident++; 
            $('#new').append(question);
            $('.question:last').attr('id',ident);
        });

        $(".management").on("click", ".addquestion", function(){ 
            ident++;
            $(this).parent().append(question);
            $(this).parent().children('.question').attr('id',ident);
            $(this).parent().children('.answer').css({"margin-left": "30px"});
            $(this).parent().children('.question').css({"margin-left": "30px"});
        });

        $(".management").on("click", ".addoption", function(){
                $(this).parent().append(answer);
                var currid = $(this).parent().attr('id');
                $(this).parent().children('.answer').attr('id',ident);
                $(this).parent().children('.answer').css({"margin-left": "30px"});
                $(this).parent().children('.question').css({"margin-left": "30px"});
            });
</script>

Answer 1

根据我的理解，你想要这样的东西：

.question {
  border: 2px solid red;
}
.answer {
  border: 2px solid blue;
}


.question, .answer {
  padding: 8px;
  margin: 0 0 8px 0;
}

<div class="question">
  Lorem ispum dolor sit amet

  <div class="answer">
    Color mit apsem
  </div>
</div>

<div class="question">
  Lorem ispum dolor sit amet

  <div class="answer">
    
    <div class="question">
      Lorem ispum dolor sit amet

      <div class="answer">
        Color mit apsem
      </div>
    </div>

  </div>
</div>

css将样式元素应用于部分孩子

1 个答案: