1

私はこのHTMLを持っています

            <div class="portItem"></div>
            <div class="portItem"></div>
            <div class="portItem"></div>
            <div class="portItem"></div>

このCSS

 .rectangle {
   height: 250px;
   width: 100%;
   position: relative;
   display: none;
   background: #ffffff;
   box-shadow: 1px 0px 20px black;
   overflow-y: hidden;}

      Here's the CSS for portItem, although not necessary (forms 4 green blocks next to each other)

     .portItem {
       height: 180px;
       width: 250px;
       position: relative;
       display: inline-block;
       background: #D0E182;
        margin: 0 5px 5px 0;

そして、クリックした portItems の後に CSS 長方形を追加しようとしています。

私が使用しようとしているJQuery関数は次のとおりです。

 $(document).ready(function() {
   $('.portItem').click(function() {
     addDiv($(this));
   });
 });



 function addDiv($ele) {
   var $box = $('<div />' '.rectangle');
   $box.insertAfter($ele);
 }

問題は var $box ステートメントにあります。動作させることができません。

前もって感謝します！

4

3 に答える 3

3

コンマとオブジェクトがありません。

var $box = $('<div />', {'class':'rectangle'});
// -------------------^ ^                   ^
//    added comma-----| |___________________|---and object literal syntax

class古いブラウザーをサポートするには、前後の引用符が必要です。className代わりに使用することもできます。

var $box = $('<div />', {className:'rectangle'});
于 2013-09-12T21:03:54.980 に答える
2

これはどう：

var $box = $('<div/>').addClass('rectangle');

...または次のように簡単です...

var $box = $('<div class="rectangle"/>');

実際、このアイテムを最初に準備してから、クローンを作成することを検討するかもしれません. 例えば：

var $boxTemplate = $('<div class="rectangle">');
function addDiv($ele) {
   $boxTemplate.clone().insertAfter($ele);
}
于 2013-09-12T21:03:11.523 に答える
0

var $box 行を次のように変更します。

var $box = $('<div class="rectangle" />');
于 2013-09-12T21:04:44.413 に答える