jqueryでそれぞれのクラスをクリックしてダイアログフォームを開きます

Question

私はこれを持っています http://jsfiddle.net/DgauY/1/ 要素がコンテンツ領域にドロップされたときに2つの項目を追加します。ドロップされた要素を削除するX要素と、もう1つのプロパティリンク。私が達成したいのは、含まれている要素に基づいてクラスを持つそれぞれのプロパティリンクをクリックすると、異なるダイアログフォームを開くことです。 iiがテキストボックスをドロップした後、プロパティをクリックするとtxtboxというプロパティクラスが表示されます。ラベルなどのテキストボックスに関連するオプションを含むダイアログフォームが必要です。 私は紛らわしくないと思います

Answer 1

あなたが求めていることを理解することは非常に難しいです。 はと同じように発音しますが、異なるダイアログボックスを開いて、異なるクラスの異なる「プロパティ」リンクのクリックにどのように反応するかを尋ねているようです。それは些細なことになります。ただ、bind（click）を使用して、関連する「プロパティ」リンクをクリックしてイベントをフックdelegate、またはlive：

$("a.type1").click(function() { 
    // Open the dialog for type1 
    // ... 

    // Prevent the default action of the link 
    return false; 
}); 
$("a.type2").click(function() { 
    // Open the dialog for type2 
    // ... 

    // Prevent the default action of the link 
}); 

（そして再び、あなたがイベントを結合delegateかliveではなくを使用する場合があります要素自体に、これがすべてで動的である場合）

それとも、ハンドラ内のすべてのタイプとブランチのための共通のハンドラを使用したい場合、あなたはそれを行うことができます。

$("a.type1, a.type2, a.type3").click(function() { 
    // ...code all of them have in common... 
    // ... 

    // Branch on what class(es) the link has and open the relevant dialog 
    // ... 

    // ...more code all of them have in common... 
    // ... 

    // Prevent the default action of the link 
    return false; 
}); 

あなたは複数のクラスを使用することができます（そのため、各リンクは、両方の「小道具」と「TYPE1」または「TYPE2」などがあります）

あなたが意味する場合は、そのがが実際に異なる種類を持っていないリンクが、あなた同じ彼らはコンテナか何かで何に分岐したい、あなたはコンテナに何があるかを調べるためにfindおよび/またはchildrenそして、あなたがしたいコンテナに上がるためにclosestを使用することができますにStackOverflowに

$("a.props").click(function() { 
    var container = $(this).closest('div'); // If the container is a div 
    if (container.find("textarea")[0]) { 
     // It has at least one text area, show dialog... 
    } 
    else if (container.find("input[type=text]")[0]) { 
     // It has at least one text input, show dialog... 
    } 
    else if (container.find("input[type=button]")[0]) { 
     // It has at least one `input`-style button, show dialog... 
    } 
    // else etc. 

    // Prevent the default action of the link 
    return false; 
});