0

. js ビンを参照してください

15 分から 45 分までドラッグして、csstdgreen を持つ john に名前を付けると、john のブロックを黄色にする必要があります。15分から30分にドラッグすると、jaryがcsstdgreenを持っている場合、jaryブロックを黄色にする必要があります。私は15分にドラッグし、csstdgreenを持っているジャックをドラッグし、次にジャックブロックを黄色にします。一度に1つだけ.jqueryでそれを行うにはどうすればよいですか

ここで例を示しました。このようにする必要があります。デモを参照してください

$(".csstdgreen").live('mousedown', function (e)
                {
                    //This line gets the index of the first clicked row.
                    lastRow = $(this).closest("tr")[0].rowIndex;
                    $(this).removeClass("csstdgreen").addClass("csstdyellow");
                    e.preventDefault();
                    return false;
                });
                $(document).live('mouseup', function () { flag = false; });
                $(".csstdgreen").live('mouseenter', function (e)
                {
                    // Compares with the last and next row index.
                    currentRow = $(this).closest("tr")[0].rowIndex;
                    if (lastRow == currentRow || lastRow == currentRow - 1 || lastRow == currentRow + 1)
                    {
                        lastRow = $(this).closest("tr")[0].rowIndex;
                    } else
                        return;

                    if (flag)
                    {
                        $(this).children(":not(:first)").addClass("csstdyellow");
                        e.preventDefault();
                        flag = false;
                    }
                });
4

3 に答える 3

1

それで、あなたはこのようなものを探していますか？

$('td').click(function() { // <-- on a td click
    if ($(this).hasClass('csstdgreen')) { // <-- check if current clicked element has this class
        $(this).css('background-color', 'yellow'); // <-- if it does the change background color
    }
});​

また、コードを document.ready 関数内にラップすることを忘れないでください。これにより、DOM 内の要素を検索する前に、DOM がロードされるのを待ちます。 http://jsfiddle.net/64Byz/

于 2012-07-21T13:23:34.217 に答える
0

あなたの与えられたHTMLから私達はあなたが望むものを達成することができないので私はあなたのHTMLを変更します...

私はjavascriptを次のように書きます

  $(document).ready(function()
              {

                $('.csstdgreen').click(function(){
                 $('.csstdgreen').removeClass('csstdyellow'); 
                  $(this).closest('table').find('td').addClass("csstdyellow");
               });
       });

HTMLで更新されたコードがオンになっています

http://jsbin.com/icaluy/36/edit#source

マウスオーバーでこれを実行したい場合は、このjsBinに従ってください

http://jsbin.com/icaluy/37/edit#preview

于 2012-07-21T13:56:34.010 に答える
0

あなたのコードは

<script type="text/javascript">
$(document).ready(function(){
    $(".csstr").click(function(){ 
        $(".csstr").removeClass('csstdyellow').addClass('csstdgreen');
        var current_cls = $(this).attr('rel');      
        $('.' + current_cls + ' > td').removeClass('csstdgreen');
        $('.' + current_cls).addClass('csstdyellow');
    });
});
</script>

これを実現するために、html にいくつかの変更を加えました。追加の属性「rel」と追加のクラスを、変更するすべての行に追加しました。「rel」値と追加されたクラス名が同じであることを強制します。たとえば、「john」に関連するすべての行の色を変更したい場合は、rel="cls1" と class="cls1" を追加する必要があります (別のクラスが既に行に追加されている場合は、class="csstr cls1 のような新しいクラスを追加します) ") ジョンのすべての行。

<table border="1">
<tr class="csstr cls1" rel="cls1" >
<td class="csstdgreen">
    15

</td>
<td class="csstdgreen" rowspan="3">
    john
</td>
</tr>
<tr class="csstr cls1" rel="cls1">
<td class="csstdgreen">
    30
</td>
</tr>
<tr class="csstr cls1" rel="cls1">
<td class="csstdgreen "> 
    45
</td>
</tr>
    <tr  class="csstr cls2" rel="cls2">
      <td class="csstdgreen ">15</td>
      <td class="csstdgreen " rowspan="2">Jary</td>
    </tr>
      <tr class="csstr cls2" rel="cls2">
      <td class="csstdgreen ">30</td>      
    </tr>
     <tr class="csstr cls3" rel="cls3">
      <td class="csstdgreen">15</td>
      <td class="csstdgreen" rowspan="1">Jack</td>
    </tr>

</table>
于 2012-07-21T13:28:19.987 に答える