改變父母父​​類改變時選擇與jQuery

Question

我想理想地使用切換，而不是條件，但不知道如何作爲新的jQuery，但認爲我得到正確的邏輯..或開始與我想做的事情。

默認情況下，父父母是灰色的「更新」和「新」是綠色的，所以想切換類取決於什麼設置和什麼時候選擇更改？

$('.column.small select').on('change', function() { 
 
    if ($(this).parent().hasClass('grey')) { 
 
    $(this).parent().parent().removeClass('grey'); 
 
    $(this).parent().parent().addClass('green'); 
 
    } 
 
});

.column.small { 
 
    color: white; 
 
} 
 
.grey { 
 
    background: grey 
 
} 
 
.green { 
 
    background: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="column small grey"> 
 
    <div class="form-group"> 
 
    <select id="PC_Row_1_Status" name="PC_Row_1_Status" ccm-passed-value="u" class="form-control"> 
 
     <option value="u" selected="selected">Updated</option> 
 
     <option value="n">New</option> 
 
    </select> 
 
    </div> 
 
</div> 
 

 
<div class="column small grey"> 
 
    <div class="form-group"> 
 
    <select id="PC_Row_2_Status" name="PC_Row_2_Status" ccm-passed-value="u" class="form-control"> 
 
     <option value="u" selected="selected">Updated</option> 
 
     <option value="n">New</option> 
 
    </select> 
 
    </div> 
 
</div> 
 

 
<div class="column small green"> 
 
    <div class="form-group"> 
 
    <select id="PC_Row_3_Status" name="PC_Row_3_Status" ccm-passed-value="u" class="form-control"> 
 
     <option value="u">Updated</option> 
 
     <option value="n" selected="selected">New</option> 
 
    </select> 
 
    </div> 
 
</div>

Answer 1

沒有必要那樣做。試着用parents -

$('.column.small select').on('change', function() { 
    if ($(this).parents('.column').hasClass('grey')) { 
    $(this).parents('.column').removeClass('grey'); 
    $(this).parents('.column').addClass('green'); 
    } 
}); 

您還可以使用closest方法這一點。你應該使用方法鏈。

$(this).closest('.column').removeClass('grey').addClass('green'); 

如果您多次使用同一個對象，它們會嘗試多次避免DOM元素查找以減少執行過程。你可以這樣做 -

var parent_div= $(this).parents('.column'); 
if (parent_div.hasClass('grey')) { 
    parent_div.removeClass('grey'); 
    parent_div.addClass('green'); 
} 

Fiddle

Answer 2

嘗試：

$('.column.small select').on('change', function() { 
    var column = $(this).closest('.column'); 
    column.removeClass('green'); 
    if ($(this).find(':selected').text() == "New") { 

    column.addClass('green'); 
    } 

}); 

Answer 3

你可以只使用.closest與removeClass使其在單行和addClass

$('select').on('change', function() { 
 
    if ($(this).closest('.column').hasClass('grey')) { 
 
    $(this).closest('.column').removeClass('grey').addClass('green'); 
 
    } 
 
});

.column.small { 
 
    color: white; 
 
} 
 
.grey { 
 
    background: grey 
 
} 
 
.green { 
 
    background: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="column small grey"> 
 
    <div class="form-group"> 
 
    <select id="PC_Row_1_Status" name="PC_Row_1_Status" ccm-passed-value="u" class="form-control"> 
 
     <option value="u" selected="selected">Updated</option> 
 
     <option value="n">New</option> 
 
    </select> 
 
    </div> 
 
</div> 
 

 
<div class="column small grey"> 
 
    <div class="form-group"> 
 
    <select id="PC_Row_2_Status" name="PC_Row_2_Status" ccm-passed-value="u" class="form-control"> 
 
     <option value="u" selected="selected">Updated</option> 
 
     <option value="n">New</option> 
 
    </select> 
 
    </div> 
 
</div> 
 

 
<div class="column small green"> 
 
    <div class="form-group"> 
 
    <select id="PC_Row_3_Status" name="PC_Row_3_Status" ccm-passed-value="u" class="form-control"> 
 
     <option value="u">Updated</option> 
 
     <option value="n" selected="selected">New</option> 
 
    </select> 
 
    </div> 
 
</div>

或用.toggleClass事件兩個類得到激活/去激活

$(this).closest('.column').toggleClass('grey green'); 

Answer 4

試試這個

$('.column.small select').change(function() { 
 
    $(this).parents('.column').toggleClass('grey green'); 
 
});

.column.small { 
 
    color: white; 
 
} 
 
.grey { 
 
    background: grey 
 
} 
 
.green { 
 
    background: green ; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="column small grey"> 
 
    <div class="form-group"> 
 
    <select id="PC_Row_1_Status" name="PC_Row_1_Status" ccm-passed-value="u" class="form-control"> 
 
     <option value="u" selected="selected">Updated</option> 
 
     <option value="n">New</option> 
 
    </select> 
 
    </div> 
 
</div> 
 

 
<div class="column small grey"> 
 
    <div class="form-group"> 
 
    <select id="PC_Row_2_Status" name="PC_Row_2_Status" ccm-passed-value="u" class="form-control"> 
 
     <option value="u" selected="selected">Updated</option> 
 
     <option value="n">New</option> 
 
    </select> 
 
    </div> 
 
</div> 
 

 
<div class="column small green"> 
 
    <div class="form-group"> 
 
    <select id="PC_Row_3_Status" name="PC_Row_3_Status" ccm-passed-value="u" class="form-control"> 
 
     <option value="u">Updated</option> 
 
     <option value="n" selected="selected">New</option> 
 
    </select> 
 
    </div> 
 
</div>

Answer 5

我已經完全改變了邏輯，以便它可以在負載下運行並且現在可以運行h更具動態性，在這裏看到一個可用的jsFiddle： 我已經將它創建爲一個函數，所以它在加載時以及更改時調用，這更好。

https://jsfiddle.net/wigster/6Lps0drd/2/

也不得不一個ID添加到每個選項/選擇：

<div class="column small grey"> 
    <div class="form-group"> 
    <select id="PC_Row_1_Status" name="PC_Row_1_Status" ccm-passed-value="u" class="form-control"> 
     <option id="u" value="u">Updated</option> 
     <option id="n" value="n" selected="selected">New</option> 
    </select> 
    </div> 
</div> 

<div class="column small grey"> 
    <div class="form-group"> 
    <select id="PC_Row_2_Status" name="PC_Row_2_Status" ccm-passed-value="u" class="form-control"> 
     <option id="u" value="u" selected="selected">Updated</option> 
     <option id="n" value="n">New</option> 
    </select> 
    </div> 
</div> 

<div class="column small green"> 
    <div class="form-group"> 
    <select id="PC_Row_3_Status" name="PC_Row_3_Status" ccm-passed-value="u" class="form-control"> 
     <option id="u" value="u">Updated</option> 
     <option id="n" value="n" selected="selected">New</option> 
    </select> 
    </div> 
</div> 

JS：

function selectBoxColourUpdate(optionSelected) { 
    var selectedId = $('option:selected', optionSelected).attr('id'); 
    console.log(selectedId); 
    if (selectedId == "u") { 
    optionSelected.parent().parent().removeClass('grey'); 
    optionSelected.parent().parent().addClass('green'); 
    } else { 
    optionSelected.parent().parent().removeClass('green'); 
    optionSelected.parent().parent().addClass('grey'); 
    } 
} 
$('.column.small select').on('change', function() { 
    selectBoxColourUpdate($(this)); 
}); 
$(document).ready(function() { 
    $('.column.small select').each(function(){ 
    selectBoxColourUpdate($(this)); 
    }) 
});