javascript - 如何使用 javascript 更改标签

Question

我们有一个元素需要单页应用程序。目前我有这个 HTML/carousel 页面来创建问题。如您所见，根本没有输入。这必须通过 javascript 才能实现。使用 onclick 事件 当您点击标签本身时，您看到的每个 H 都必须转换为输入标签。

有什么帮助吗？我以为我已经找到了出路，但是没有用

HTML:

  <div>
      <div ng-controller="CarouselDemoCtrl">
          <div style="height:10px;">
              <carousel interval="myInterval">
                  <slide ng-repeat="slide in slides" active="slide.active" >
                  <div class="CreateSlideCss">
                    <h1>
                        <div class="CreationTitel">
                            Click om uw titel op te geven
                        </div>
                    </h1>
                    <h2>
                        <div class="CreationVraag"> 
                            Click om uw vraag in te voeren .
                        </div>
                    </h2>
                    <button class="CreationVraagBtn" >click voor uw type vraag te selecteren</button>
                    <h3>
                        <textarea class="CreationAntwoordTxt" >hier is de content van uw antwoorden</textarea>
                    </h3>
                          <div class="carousel-caption">
                              <h4>Slide {{$index}}</h4>
                          </div>
                      </div>
                  </slide>
              </carousel>
          </div>
          <div class="row" >
              <div class="col-md-6">
                  <button type="button" class="btn btn-info" ng-click="addSlide()">Add Slide</button>
              </div>
          </div>
      </div>
  </div>

jQuery:

$( "button.CreationVraagBtn" ).click(function() {
    $( "div.CreationTitel" ).replaceWith( "<input value='" + "hallo" + "'></input>" );
});

Answer 1

您可以将点击更新为:

$('h1, h2, h3, h4, h5, h6').on('click', function(){
    $(this).html('<input type="text" />');
});

还有更多 Angular 方式，你可以在你的指令中使用它:

.directive('carousel', function() {
    return {
       restrict: 'E',
       templateUrl: function(elem, attr){
          angular.element(elem).find('h1, h2, h3, h4, h5, h6').on('click', function(){
              $(this).html('<input type="text" />');
          });
       }
    };
});

根据文档:

If jQuery is available, angular.element is an alias for the jQuery function. If jQuery is not available, angular.element delegates to Angular's built-in subset of jQuery, called "jQuery lite" or "jqLite.".

---

jqLite is a tiny, API-compatible subset of jQuery that allows Angular to manipulate the DOM in a cross-browser compatible way. jqLite implements only the most commonly needed functionality with the goal of having a very small footprint.

_{jqLite is already implemented in angular which has the most commonly used methods. if you load jQuery before angular then you will make use of fully functional jQuery methods.}