1

div.spot1同じ動作が必要です-画像入力が空の場合div.spot2は削除ボタンを非表示にし、画像がアップロードされたときに削除ボタンを表示し、画像がアップロードされたときに画像srcを変更し、削除ボタンをクリックしてajaxリクエストをサーバーに送信します。もちろんコピー/クラスを からfirstに変更するだけで、spot1 の js コードを spot2 に貼り付けますsecond。しかし、このようなスポットが 4 つあるとすると、js ファイルにはほぼ同じコードが 4 つあることになります。それはベストプラクティスではないのではないかと心配しています。私は何をすべきか？

HTML:

    <form class='upload' action="" method="POST" enctype="multipart/form-data">
        <div class="spot1">
            <span class='filename first'>FILE 1</span>
            <button type='button' class='delete first'>&#x274C</button>
            <input type="file" name="image" class="input first" accept="image/*">
            <input type="button" value="+" class="browse first"/> 
            <a href="{{ourl}}" class="fancybox" title="{{title}}"><img class="tn first" src="{{turl}}"></a>
            <span class="status first"></span>
        </div>

        <div class="spot2">
            <span class='filename second'>FILE 1</span>
            <button type='button' class='delete second'>&#x274C</button>
            <input type="file" name="image" class="input second" accept="image/*">
            <input class="browse second" type="button" value="+"/> 
            <a href="{{ourl}}" class="fancybox" title="{{title}}"><img class="tn second" src="{{turl}}"></a>
            <span class="status second"></span>
        </div>
    </form>

JS の一部 (例を作成するためだけに):

if ( $('.tn.first').attr('src') == "") {
    ...
}

$('.browse.first').on("click", function () {
    $('.input.first').click();
 });

$('.input.first').on('change', function () {
...
};
4

4 に答える 4

0

次のようにマークアップを変更してはどうでしょうか

<form class='upload' action="" method="POST" enctype="multipart/form-data">
    <div class="spot" id="spot1">
        <span class='filename'>FILE 1</span>
        <button type='button' class='delete'>&#x274C</button>
        <input type="file" name="image" class="input" accept="image/*">
        <input type="button" value="+" class="browse"/> 
        <a href="{{ourl}}" class="fancybox" title="{{title}}"><img class="tn" src="{{turl}}"></a>
        <span class="status"></span>
    </div>

    <div class="spot" id="spot2">
        <span class='filename'>FILE 2</span>
        <button type='button' class='delete'>&#x274C</button>
        <input type="file" name="image" class="input" accept="image/*">
        <input class="browse" type="button" value="+"/> 
        <a href="{{ourl}}" class="fancybox" title="{{title}}"><img class="tn" src="{{turl}}"></a>
        <span class="status"></span>
    </div>
</form>

そしてJS

$('.spot .browse').on('click', function () {
    $(this).parent().find('.input').click();
 });

$('.spot .input').on('change', function () {
   alert('I\'m input of type file of ' + $(this).parent().prop('id') + ' and I\'m changed');
});

ここにjsFiddleのデモがあります

于 2013-05-29T21:26:33.210 に答える
0

それは確かにベストプラクティスではありません。

どのような構造になるかが (正確に) わかっている場合は、次のようなことができます。

var FileModule = function(elem) {
    // Throw your events here
}

インスタンス化は、要素を渡すのと同じくらい簡単です。jQuery を使用している場合は$.fn.extend()、次のように関数を使用して正確にこれを行うことができます。

$.fn.FileModule = function() {
  return this.each(function() {
   // `this` is your element
   $(this).find(".input.first").on("change", function() { ... });
  });
};

そこから、スポットを含む jQuery セレクターを呼び出して、モジュールを初期化できます(つまり、それが何であるか) 。FileModule

さらに動的にしたい場合は、カスタム イベントをバインドして、コードの外部部分と対話できるようにすることを検討してください。これはあなたの質問の範囲を超えています。

于 2013-05-29T21:25:39.633 に答える
-1

すでにjqueryを使用しているため、属性内の部分文字列に基づいて選択するセレクターがあります(属性に含まれるもの)。

$('div[class*="spot"]').doSomething();
于 2013-05-29T21:22:49.247 に答える