Question

我正在尝试使用AngularJS和Bootstrap在模态中创建幻灯片。所以，我已经动态创建了DIV，但我的问题是我必须将活动类添加到第一个DIV中。

如果不使用jQuery，我怎么能这样做？

另外，想知道这是否有其他方法可以实现相同的功能？任何领导都将不胜感激。

以下是代码：

<!DOCTYPE html>
<html ng-app="modalApp">
  <head>
    <title>This is a custom modal</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-controller="modalAppController">

      <button class="btn btn-primary" data-toggle="modal" data-target="#whatsNewModal">Open Modal</button>
      <!-- Whats New feature modal -->
<div id="whatsNewModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">

        <!-- Modal Header -->

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">x</button>
          <h3 class="modal-title" style="color: #000"><strong><i class="fa fa-bullhorn" style="margin-right: 10px"></i><span>What's New</span></strong></h3>
        </div>

        <!-- Modal Body / Modal Content -->

        <div class="modal-body">
          <div id="whatsNewCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">

            <!-- Carousel Images -->

            <div class="carousel-inner" role="listbox" id="carousel-in">

              <div id="carouselContent">

              </div>


            <!-- Carousel Controls -->
                <a class="left carousel-control" href="#whatsNewCarousel" role="button" data-slide="prev" style="background: transparent">
                  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true" style="color: #dcdde1; top: 40%; left: 10px; font-size: 40px"></span>
                  <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#whatsNewCarousel" role="button" data-slide="next" style="background: transparent">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true" style="color: #dcdde1; top: 40%; right: 22px; font-size: 40px"></span>
                    <span class="sr-only">Previous</span>
                </a>


          </div>
        </div>

      </div>
    </div>
</div>
    </div>
  </body>
</html>

app.js

(function(){
  'use strict';

  angular.module('modalApp', [])
  .controller('modalAppController', modalAppController)
  modalAppController.$inject = ['$scope'];
  function modalAppController($scope){
    $scope.carouselData = function(src, head, desc){

// Creation of item div

      $scope.carouselCon = document.getElementById("carouselContent");
      $scope.newDiv = document.createElement("DIV");
      $scope.newDiv.setAttribute("class", "item active");
      $scope.carouselCon.appendChild($scope.newDiv);


// Creation of Image Element

      $scope.image = document.createElement("img");
      $scope.image.setAttribute("src", src);
      $scope.image.setAttribute("class", "img-fluid d-block");
      $scope.newDiv.appendChild($scope.image);

// Creation of Image Content

      $scope.h3 = document.createElement("H3");
      $scope.h4 = document.createElement("H4");

      $scope.h3Content = document.createTextNode(head);
      $scope.h4Content = document.createTextNode(desc);
      $scope.newDiv.appendChild($scope.h3.appendChild($scope.h3Content));
      $scope.newDiv.appendChild($scope.h4.appendChild($scope.h4Content));

    };

    $scope.carouselData("Screen.png", "Feature 1", "Here goes the description");
    $scope.carouselData("Screen2.png", "Feature 2", "Here goes the description"); // I want to pass more functions like this.
  }
})();

Answer 1

是。您可以使用div选择一个CSS :first-child Selector。

var element = angular.element( document.querySelector( '.classname:first-child' ) );
element.addClass("new_class_name");

在不使用jQuery的情况下，仅从一组动态创建的DIV中将类添加到第一个DIV

1 个答案: