0

すべてが親内に存在する、さまざまなサイズのdivのセットを作成しました。これらのdivには、サイズと内容に応じて異なるクラス名があります。彼らが共有しているのは、EditBlockと呼ばれる別のクラス名です。divを作成するためのコードは...です。

<script type="text/javascript">

function makeSmallBlockdiv ()
{
var smallBlock = $('<div class="SmallBlock EditBlock"></div>').appendTo("#canvas");
smallBlock.draggable({containment: "#canvas", scroll: false, grid: [10, 10]}, {cursor: "move", cursorAt: {top: 125, left: 150}})
smallBlock.append('<div class="article_title fontCenter fontBold font24">Article Title</div>')
smallBlock.append('<div class="article_Image"><img style="width: 250px;" src="<? echo $image1 ?>"></div>')
smallBlock.append('<div class="font14"><? echo substr($article_text, 0, 200) ?></div>') 

}

</script>

2番目のdivは次のとおりです。

<!-- script to create large block draggable div  -->  

<script type="text/javascript">
function makeLargeBlockdiv ()
{
var largeBlock = $('<div class="LargeBlock EditBlock"></div>').appendTo("#canvas");
largeBlock.draggable({containment: "#canvas", scroll: false, grid: [10, 10]}, {cursor: "move", cursorAt: {top: 250, left: 210}})
largeBlock.append('<div class="article_title fontCenter fontBold font32">Article Title</div>')
largeBlock.append('<div class="article_Image"><img style="width: 90%" src="<? echo $image ?>"></div>')

largeBlock.append('<div class="font14"><? echo substr($article_text, 0, 200) ?></div>') 

}    
</script>

私が抱えている問題は、どのdivにマウスが置かれているかを特定する必要があることです。thres divのインスタンスが複数存在する可能性があるため、そのdivの正しいインデックスも見つける必要があります。

これは私がdivを識別するために使用しているコードですが、インデックスと一意のクラス名を取得する方法がわかりません。

<script type="text/javascript">
    $(document).ready(function() {
      $('.EditBlock').bind('mouseover mouseout click', function(event) {
        var $tgt = $(event.target);
        if (!$tgt.closest('.syntax_hilite').length) {
          $tgt.toggleClass(event.type == 'click' ? 'outline-element-clicked' : 'outline-element');      
        }
      });
    });
</script>

要約すると、divのクラス名と、divのインスタンスに関連付けられているインデックスを取得する必要があります。

長い間ご迷惑をおかけして申し訳ありませんでしたが、言葉で説明することはできませんでした。

私はjqueryを学び始めたばかりであり、来たる日にさらに多くの質問をすることになることを忘れました。

どんな助けでも大歓迎です。

ありがとう

クリス

4

1 に答える 1

3

を作成しているようですdiv's dynamically。したがって、イベント委任を使用してイベントを添付する必要があります。

$('.EditBlock').bind('mouseover mouseout click', function(event) {

する必要があります

$('body').on('mouseover mouseout click','.EditBlock', function(event) {
    var $this = $(this);
    //Then to access the **classNames** you can do this

    var classNames[] = $this.attr('class').split(' ');

   // To access the index of the current div..

   var index = $this.index();

});

更新しました

これを試して

​$('#small , #big').on('click', function(){
    var $container = $('#container');
    if(this.id === 'small'){
          $container.append('<div class="smallBlock EditBlock">' +
                              'Small Block </div>');
    }
    else{
          $container.append('<div class="largeBlock EditBlock">' +
                              'Large Block </div>');
    }        
});

$('#container').on('click','.EditBlock', function(event) {
    var $this = $(this);
    var $container = $('#container');
    //Then to access the **classNames** you can do this
    var index;
    if($this.hasClass('smallBlock')){
       index = $container.find('.smallBlock').index($this);
        alert('Current Small Block index is : ' + index);        
    }
    else if ($this.hasClass('largeBlock')){
        index = $container.find('.largeBlock').index($this);
        alert('Current Large Block index is : ' + index);         
    }
});

フィドルをチェック

于 2012-12-06T21:42:10.310 に答える