2 verschiedene Werte von Dropdown führen gleiche Funktion, aber muss nur einmal ausgeführt werden

Question

Hier ist das Szenario. Ich habe ein Formular, das ein Dropdown mit 4 Optionen enthält. Wenn eine bestimmte Option ausgewählt ist, muss ich ein HTML-Element neben der Beschriftung des Feldes einfügen. Grundsätzlich muss ich ein FontAwesome-Icon einfügen, das einen Tooltip anzeigt. Das Problem, das ich habe, ist, dass das FontAwesome-Symbol der Seite so oft hinzugefügt wird, wie eine der beiden Optionen ausgewählt ist. Wenn ich "C40" anwähle, wird ein Symbol hinzugefügt, wenn ich "C60" anwähle, wird ein anderes Symbol hinzugefügt, wenn ich "C60" anwähle, wird ein anderes Symbol hinzugefügt usw. Wie verhindere ich, dass die change() Funktion mehrere FontAwesome hinzufügt ? Symbole

resModel.on('change', function(e) { 

    if(resModel.val() == 'C40' || resModel.val() == 'C60') { 

     $('<i id="resC-control-box-tip" class="tooltip"></i>').insertAfter('#field_2_3 label.gfield_label > span.gfield_required'); 
     $('<i id="resC-cell-tip" class="tooltip"></i>').insertAfter('#field_2_4 label.gfield_label > span.gfield_required'); 

     // Control box tooltip 
     $('#resC-control-box-tip').qtip({ 
      content: '<img class="avia_image " src="http://mywebsite.com/wp-content/uploads/2016/07/awesome-img.jpg" alt="" title="" itemprop="contentURL">', 
      position: { 
       my: 'left center', 
       at: 'right center', 
       target: $('#resC-control-box-tip') 
      }, 
      style: { 
       classes: 'qtip-blue' 
      } 
     }); 

     // Cell tooltip 
     $('#resC-cell-tip').qtip({ 
      content: '<img class="avia_image " src="http://mywebsite.com/wp-content/uploads/2016/07/another-awesome-img.jpg" alt="Resilience C Cell Serial Number" title="" itemprop="contentURL">', 
      position: { 
       my: 'left center', 
       at: 'right center', 
       target: $('#resC-cell-tip') 
      }, 
      style: { 
       classes: 'qtip-blue' 
      } 
     }); 

    }else if(resModel.val() == 'D40' || resModel.val() == 'D60') { 

     $('<i id="resD-control-box-tip" class="tooltip"></i>').insertAfter('#field_2_38 label.gfield_label > span.gfield_required'); 
     $('<i id="resD-cell-tip" class="tooltip"></i>').insertAfter('#field_2_39 label.gfield_label > span.gfield_required'); 

     // Control box tooltip 
     $('#resD-control-box-tip').qtip({ 
      content: '<img class="avia_image " src="http://mywebsite.com/wp-content/uploads/2015/05/img3.jpg" alt="" title="" itemprop="contentURL">', 
      position: { 
       my: 'left center', 
       at: 'right center', 
       target: $('#resD-control-box-tip') 
      }, 
      style: { 
       classes: 'qtip-blue' 
      } 
     }); 

     // Cell tooltip 
     $('#resD-cell-tip').qtip({ 
      content: '<img class="avia_image " src="http://mywebsite.com/wp-content/uploads/2015/05/img3.jpg" alt="" title="" itemprop="contentURL">', 
      position: { 
       my: 'left center', 
       at: 'right center', 
       target: $('#resD-cell-tip') 
      }, 
      style: { 
       classes: 'qtip-blue' 
      } 
     }); 

    } 

}); 

Answer 1

@Mike Brant Ich habe dies geprüft und es sogar einmal versucht, aber Ihr Kommentar ließ mich darüber nachdenken, was schließlich die Lösung war, die ich war Auf der Suche nach. Hier ist, was ich getan habe und ich hoffe, es hilft jemand anderem ...

Statt das FontAwesome-Symbol während des Change-Ereignisses einfügen Ich habe es einfach einmal hinzugefügt und dann verwendet hide(). Dann zeige ich während des Change Events einfach() das Icon an. Das Ergebnis ist genau das, was ich brauchte. Ein Symbol hinzugefügt und angezeigt, wenn die entsprechende Option ausgewählt ist. Manchmal ist es viel zu einfach zu kompliziert zu machen und leider mache ich es die ganze Zeit!

var resModel = $('#input_2_9'); 
var resPlusModel = $('#input_2_30'); 

$('<i id="resC-control-box-tip" class="tooltip"></i>').insertAfter('#field_2_3 label.gfield_label > span.gfield_required'); 
$('<i id="resC-cell-tip" class="tooltip"></i>').insertAfter('#field_2_4 label.gfield_label > span.gfield_required'); 

var resC_ControlBox = $('#resC-control-box'); 
var resC_Cell = $('#resC-cell'); 
var resD_ControlBox = $('#resD-control-box'); 
var resD_Cell = $('#resD-cell'); 

resC_ControlBox, resC_Cell, resD_ControlBox, resD_Cell.hide(); 

// Res C Control box tooltip 
$('#resC-control-box-tip').qtip({ 
    content: '<img class="avia_image " src="http://mywebsite.com/wp-content/uploads/2016/07/awesome-img.jpg" alt="" title="" itemprop="contentURL">', 
    position: { 
     my: 'left center', 
     at: 'right center', 
     target: $('#resC-control-box-tip') 
    }, 
    style: { 
     classes: 'qtip-blue' 
    } 
}); 

// Res C Cell tooltip 
$('#resC-cell-tip').qtip({ 
    content: '<img class="avia_image " src="http://mywebsite.com/wp-content/uploads/2016/07/another-awesome-img.jpg" alt="" title="" itemprop="contentURL">', 
    position: { 
     my: 'left center', 
     at: 'right center', 
     target: $('#resC-cell-tip') 
    }, 
    style: { 
     classes: 'qtip-blue' 
    } 
}); 

$('<i id="resD-control-box-tip" class="tooltip"></i>').insertAfter('#field_2_38 label.gfield_label > span.gfield_required'); 
$('<i id="resD-cell-tip" class="tooltip"></i>').insertAfter('#field_2_39 label.gfield_label > span.gfield_required'); 

// Res D Control box tooltip 
$('#resD-control-box-tip').qtip({ 
    content: '<img class="avia_image " src="http://mywebsite.com/wp-content/uploads/2015/05/img3.jpg" alt="" title="" itemprop="contentURL">', 
    position: { 
     my: 'left center', 
     at: 'right center', 
     target: $('#resD-control-box-tip') 
    }, 
    style: { 
     classes: 'qtip-blue' 
    } 
}); 

// Res D Cell tooltip 
$('#resD-cell-tip').qtip({ 
    content: '<img class="avia_image " src="http://mywebsite.com/wp-content/uploads/2015/05/img3.jpg" alt="" title="" itemprop="contentURL">', 
    position: { 
     my: 'left center', 
     at: 'right center', 
     target: $('#resD-cell-tip') 
    }, 
    style: { 
     classes: 'qtip-blue' 
    } 
}); 

resModel.on('change', function() { 

    if(resModel.val() == 'C40' || resModel.val() == 'C60') { 

     resC_ControlBox, resC_Cell.show(); 

    }else if(resModel.val() == 'D40' || resModel.val() == 'D60') { 

     resD_ControlBox, resD_Cell.show(); 

    } 

}); 

Answer 2

Kinda lahm Lösung ... eine Variable in Top-Änderungsfunktion auf 0 setzen; Surround alle Blöcke in dem Sie die Symbole hinzufügen und die Variable innerhalb der inkrementieren, wenn Aussagen nur ein Symbol hinzufügen Wenn die Variable immer noch Null ist