Applicare proprietà a più oggetti

Question

Non riesco a trovare il modo migliore di utilizzare jQuery per applicare le modifiche a più campi di input dopo aver apportato una modifica a un altro campo di input. Il codice sotto funziona se c'è solo 1 ID campagna. Tuttavia, quando sono presenti più campagne, il mio codice applica semplicemente l'ultima istanza a tutte le campagne. Come posso modificarlo per applicarlo individualmente a ciascun ID campagna?

---

OBIETTIVI

Organizzazione di stato passa da 'attivo' a 'pausa'.

per ogni ID di campagna:

• Stato Disabilita campagna discesa.
• Se lo stato della campagna è 'Rinnovato', lasciare 'Rinnovato'.
• Se lo stato della campagna è "Attivo", passare a "In pausa".
• Se lo stato della campagna è "in pausa", lasciare "in pausa".

Lo stato organizzazione passa da "In pausa" a "Attivo".

per ogni ID di campagna:

• Abilita Stato campagna discesa.
• Lascia lo stato invariato.

---

Ecco il codice (si prega di ignorare le tabelle!):

var campaign_status = function() { 
 
    // If the Organization Status is set to 'Paused' and the Campaign is 'Active', make the campaign status 'Paused' and disable the drop down. 
 
    if ($('#orgautorenewstatus').val() == "Pause" && $('.autorenewstatus').val() == "Active") { 
 
     $('.autorenewstatus').prop('disabled', 'disabled'); 
 
     $('.autorenewstatus').val("Pause"); 
 
    } 
 
    // If the Organization Status is set to 'Paused' and the Campaign is 'Paused' or 'Renewed', leave the Campaign Status and disable the drop down. 
 
    else if ($('#orgautorenewstatus').val() == 'Pause') { 
 
     $('.autorenewstatus').prop('disabled', 'disabled'); 
 
    } 
 
    else { 
 
     $('.autorenewstatus').prop('disabled', false); 
 
    } 
 
}; 
 
$(campaign_status); 
 
$("#orgautorenewstatus").change(campaign_status);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h3>Organization Status</h3> 
 
<select id="orgautorenewstatus" name="orgautorenewstatus"> 
 
    <option value="Active" selected="selected">Active</option> 
 
    <option value="Pause">Paused</option> 
 
</select> 
 

 
<br /> 
 
<br /> 
 

 
<h4>Campaign Status</h4> 
 
<table> 
 
    <tbody> 
 
     
 
     <tr> 
 
      <td>#1</td> 
 
      <td> 
 
       <select class="autorenewstatus" name="autorenewstatus_48622"> 
 
        <option value="Pause">Paused</option> 
 
        <option value="Active" selected="selected">Active</option> 
 
        <option value="Renewed">Renewed</option></select> 
 
      </td> 
 
     </tr> 
 

 
     <tr> 
 
      <td>#2</td> 
 
      <td> 
 
       <select class="autorenewstatus" name="autorenewstatus_48884"> 
 
        <option value="Pause">Paused</option> 
 
        <option value="Active">Active</option> 
 
        <option value="Renewed" selected="selected">Renewed</option> 
 
       </select> 
 
      </td> 
 
     </tr> 
 
     
 
     <tr> 
 
      <td>#3</td> 
 
      <td> 
 
       <select class="autorenewstatus" name="autorenewstatus_49000"> 
 
        <option value="Pause">Paused</option> 
 
        <option value="Active" selected="selected">Active</option> 
 
        <option value="Renewed">Renewed</option> 
 
       </select> 
 
      </td> 
 
     </tr> 
 
     
 
    </tbody> 
 
</table>

Ci deve essere un modo più facile e più semplice. Nuovo a jQuery, ma riprendendolo il più velocemente possibile Grazie per il tuo aiuto!

See Fiddle: http://jsfiddle.net/riverecho/40087wdb/8/

Answer 1

In primo luogo, la cache gli oggetti jQuery. Non è necessario creare un nuovo oggetto jQuery ogni volta che è necessario interagire con un elemento.

Tuttavia, ci sono due ragioni per le quali il codice si comporta male quando viene utilizzato con più campagne:

1. hai utilizzato un ID al posto di una classe per #orgautorenewstatus.
2. Ogni campagna deve risiedere nel proprio ambito nell'HTML.

Per risolvere questo problema, avvolgere ciascuna campagna in un elemento separato div e modificare gli ID in classi. Quindi scorrere le campagne e applicare lo script a ciascuna campagna.

Assicurarsi che quando si selezionano gli elementi si faccia riferimento solo agli elementi contenuti all'interno della campagna su cui sta attualmente lavorando lo script.

$('.campaign').each(function(){ 
 
    var oars = $('.orgautorenewstatus', this); 
 
    var ars = $('.autorenewstatus', this); 
 
    var campaign_status = function() { 
 
     ars.prop('disabled', oars.val() === "Pause"); 
 
     if (oars.val() === "Pause") ars.each(function(){ 
 
      if(this.value === "Active") this.value = 'Pause'; 
 
     }); 
 
    }; 
 
    campaign_status(); 
 
    oars.change(campaign_status); 
 
});

/* For cosmetic purposes only */ 
 
.campaign { display: inline-block; width: 33%; } * { margin: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- The HTML has been minified to save space --> 
 
<div class="campaign"><h3>Organization Status</h3><select class="orgautorenewstatus" name="orgautorenewstatus"><option value="Active" selected="selected">Active</option><option value="Pause">Paused</option></select><h4>Campaign Status</h4><table><tbody><tr><td>#1</td><td><select class="autorenewstatus" name="autorenewstatus_48622"><option value="Pause">Paused</option><option value="Active" selected="selected">Active</option><option value="Renewed">Renewed</option></select></td></tr><tr><td>#2</td><td><select class="autorenewstatus" name="autorenewstatus_48884"><option value="Pause">Paused</option><option value="Active">Active</option><option value="Renewed" selected="selected">Renewed</option></select></td></tr><tr><td>#3</td><td><select class="autorenewstatus" name="autorenewstatus_49000"><option value="Pause">Paused</option><option value="Active" selected="selected">Active</option><option value="Renewed">Renewed</option></select></td></tr></tbody></table></div><div class="campaign"><h3>Organization Status</h3><select class="orgautorenewstatus" name="orgautorenewstatus"><option value="Active" selected="selected">Active</option><option value="Pause">Paused</option></select><h4>Campaign Status</h4><table><tbody><tr><td>#1</td><td><select class="autorenewstatus" name="autorenewstatus_48622"><option value="Pause">Paused</option><option value="Active" selected="selected">Active</option><option value="Renewed">Renewed</option></select></td></tr><tr><td>#2</td><td><select class="autorenewstatus" name="autorenewstatus_48884"><option value="Pause">Paused</option><option value="Active">Active</option><option value="Renewed" selected="selected">Renewed</option></select></td></tr><tr><td>#3</td><td><select class="autorenewstatus" name="autorenewstatus_49000"><option value="Pause">Paused</option><option value="Active" selected="selected">Active</option><option value="Renewed">Renewed</option></select></td></tr></tbody></table></div><div class="campaign"><h3>Organization Status</h3><select class="orgautorenewstatus" name="orgautorenewstatus"><option value="Active" selected="selected">Active</option><option value="Pause">Paused</option></select><h4>Campaign Status</h4><table><tbody><tr><td>#1</td><td><select class="autorenewstatus" name="autorenewstatus_48622"><option value="Pause">Paused</option><option value="Active" selected="selected">Active</option><option value="Renewed">Renewed</option></select></td></tr><tr><td>#2</td><td><select class="autorenewstatus" name="autorenewstatus_48884"><option value="Pause">Paused</option><option value="Active">Active</option><option value="Renewed" selected="selected">Renewed</option></select></td></tr><tr><td>#3</td><td><select class="autorenewstatus" name="autorenewstatus_49000"><option value="Pause">Paused</option><option value="Active" selected="selected">Active</option><option value="Renewed">Renewed</option></select></td></tr></tbody></table></div>

Answer 2

Per un più campagne, questo sarebbe il mio prendere su di esso. Wrap tutte le campagne nei propri div come questo

<div class="campaignStatus">...</div>

assegnare una classe alla casella a discesa (dal id s devono essere unici)

<select id="orgautorenewstatus" name="orgautorenewstatus" class="campaignBox">...</select>

VERSIONE 2 (migliorata: vedi updated fiddle)

riguarda solo gli elementi di una determinata campagna di v (anziché scorrendo tutte le campagne)

$(".campaignBox").on('change', function() { 
     // If the Organization Status is set to 'Paused' and the Campaign is 'Active', 
     // make the campaign status 'Paused' and disable the drop down. 
     if ($(this).val() === "Pause") { 

      //for each autorenew status within the campaign 
      $(this).closest('.campaignStatus').find('.autorenewstatus').each(function (i, box) { 
       if ($(box).val() == "Active") { 
        $(box).val("Pause"); 
       } 
      }); 
      $(this).closest('.campaignStatus').find('.autorenewstatus').prop('disabled', 'disabled'); 
     } else { 
      // If the Organization Status is set to 'Paused' and the Campaign is 'Paused' or 'Renewed', 
      // leave the Campaign Status and disable the drop down. 
      $(this).closest('.campaignStatus').find('.autorenewstatus').prop('disabled', false); 
     } 
    }); 

Answer 3

Ho semplificare la logica un po ', ecco il mio campione di lavoro

var campaign_status = function() { 
     var newStatus = $('#orgautorenewstatus').val() == "Pause"? 'disabled' : false; 
     $('.autorenewstatus').each(function(){ 
     if($(this).val() == "Active") {   
      $('.autorenewstatus').prop('disabled', newStatus); 
      $('.autorenewstatus').val("Pause"); 
     } else { 
      $('.autorenewstatus').prop('disabled', newStatus); 
     } 
     }); 

    }; 
    $(campaign_status); 
    $("#orgautorenewstatus").change(campaign_status); 

http://jsfiddle.net/wx5ksfkk/1/