使用jquery / js同時調整兩個元素的大小

Question

我一直試圖同時調整兩個窗口的大小，但是由於某種原因，它不起作用。 我試圖抓住錯誤，但一無所獲。

注意：我不想使用jQuery調整大小，因為它沒有用於檢查調整大小的快速間隔

JAVASCRIPT：

function _u(e){
    try {
        e.parent('.boss').find('.first').width( e.width() ); //tried with parent('.boss').next('.first') or directy with prev('.first')
    } catch(err){alert(err);}
}

$(document).ready(function(){
    $(".data").each(function(){
        var resizerint;
        $(this).mousedown(function(){
            try {
                var eee = $(this);
                var resizerint = setInterval(function(){
                        try {
                            _u( eee );
                        } catch(err){alert(err);}
                    },10); // i need it 10ms
            } catch(err){alert(err);}

            $('.test').html('<font style="position:absolute;top:0;right:0;color:red;"> mouse DOWN </font>');
        }).mouseup(function(){
            try{
                clearInterval(resizerint);
                } catch(err){alert(err);}

            $('.test').html('<font style="position:absolute;top:0;right:0;color:green;"> mouse UP </font>');
        });
    });
});

和HTML：

<div class="boss">
    <div class="first">
        <table>
            <tr>
                <td>
                    <div class="title">ONEEEEE</div>
                </td>
            </tr>
        </table>
    </div>
    <div class="second">
        <textarea class="data" > ONEEE TEXTY TESTY NJAMMM! </textarea>
    </div>
</div>

<div class="boss">
    <div class="first">
        <table>
            <tr>
                <td>
                    <div class="title">TWOOOOOO</div>
                </td>
            </tr>
        </table>
    </div>
    <div class="second">
        <textarea class="data" > TWOOO TEXTY TESTY NJAMMM! </textarea>
    </div>
</div>

<div class="text"></div>

預先感謝您提供的任何幫助。

JSFIDDLE（如果您看到的話，在TEXTAREA上進行MOUSEDOWN時，藍色不會重新調整大小） http://jsfiddle.net/2sfFW/

Answer 1

我的第一個答案是缺少“ $”，但是並不能解決問題。

它在某種程度上可以正常工作，但是在初始化之前必須先單擊文本字段。 我將您的藍色版本用作可視化工具。

正確的jQuery遍歷是

 e.parent().parent('.boss').find('.first')

要么

 e.parents('.boss').find('.first')

您必須使用復數版本，因為它上面有兩個父div。 使用parent（）。parent（）更具體，但在這種情況下可能沒有必要。

http://jsfiddle.net/aQKVD/1/

如果刪除mouseup / mousedown處理程序，它將在document.ready初始化，我想可能正是您想要的。 除非您有其他需要，否則不必清除變量，因為.each（）創建與該特定div綁定的函數的單獨實例。 這是這樣的版本：

http://jsfiddle.net/aQKVD/2/

Answer 2

不能在JSfiddle中修復它，但是對於初學者來說，您無需使用“ $”。 我已經建立了JSfiddle鏈接，以便其他人可以嘗試。 http://jsfiddle.net/aQKVD/

function _u(e){
try {
    e.parent('.boss').find('.first').width( e.width() ); //tried with parent('.boss').next('.first') or directly with prev('.first')
    } catch(err){alert(err);}
}

$(document).ready(function(){
   (".data").each(function(){

最后一行應該是

   $(".data").each(function(){