JQuery - onchangeイベントの分割行の色を変更しますか？

Question

私はrowの色をドロップダウンのonchangeの値に基づいて変更する必要があります。私はdivisionの形のrowsを持っています。以前の2つのメインのtablesだった2つのメインのdivisionsには、行の分割形式の行があります。私が最初divisionにrowのcomboの値を変更するとき

は、今私は、全体divisionrowのcolorを変更したいです。また、私はrowのcolorを第2のメインdivisionにも変更したいと考えています。私は容易にtablesでそれをすることができましたが、divisionと私はそれを見つけるのが難しく、また私は実現可能性についてはわかりません。以下は私のコード構造と私が色を変更するために使用したJQueryです。

$('#bodyLeft tr').bind('click', function(e) { 
 
    var bodyLeftTable = $("#bodyLeft tr").index(this); 
 
    var vehicleClassVal = $("#bodyLeft tr:nth-child(" + bodyLeftTable + ")").find('.vehicleClass').val(); 
 
    if (scheduleStatusVal == 'Volvo') { 
 
    $("#bodyLeft tr:nth-child(" + bodyLeftTable + ")").addClass("runningVehicleClass"); 
 
    $("#bodyRight tr:nth-child(" + bodyLeftTable + ")").addClass("runningVehicleClass"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!--First Division--> 
 
<div id="bodyLeft"> 
 
    <div class="divTableRow"> 
 
    <div class="divTableCell divWidth"> 
 
     <select class="vehicleClass"> 
 
        <option value="volvo">Volvo</option> 
 
        <option value="saab">Saab</option> 
 
        <option value="mercedes">Mercedes</option> 
 
        <option value="audi">Audi</option> 
 
       </select> 
 
    </div> 
 
    <div class="divTableCell divWidth"> 
 
     <input type="text" name="address"> 
 
    </div> 
 
    <div class="divTableCell divWidth" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"> 
 
     <input type="text" name="pass"> 
 
    </div> 
 
    </div> 
 
    <div class="divTableRow"> 
 
    <div class="divTableCell divWidth"> 
 
     <select class="vehicleClass"> 
 
        <option value="volvo">Volvo</option> 
 
        <option value="saab">Saab</option> 
 
        <option value="mercedes">Mercedes</option> 
 
        <option value="audi">Audi</option> 
 
       </select> 
 
    </div> 
 
    <div class="divTableCell divWidth"> 
 
     <input type="text" name="address"> 
 
    </div> 
 
    <div class="divTableCell divWidth" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"> 
 
     <input type="text" name="pass"> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!--Second Division --> 
 
<div id="bodyRight"> 
 
    <div class="divTableRow"> 
 
    <div class="divTableCell width20"> 
 
     <input type="text" name="parts"> 
 
    </div> 
 
    <div class="divTableCell width85"> 
 
     <input type="text" name="ischecked"> 
 
    </div> 
 
    <div class="divTableCell width85" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"> 
 
     <input type="text" name="validity"> 
 
    </div> 
 
    </div> 
 
    <div class="divTableRow"> 
 
    <div class="divTableCell divWidth"> 
 
     <input type="text" name="parts"> 
 
    </div> 
 
    <div class="divTableCell divWidth"> 
 
     <input type="text" name="ischecked"> 
 
    </div> 
 
    <div class="divTableCell divWidth" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"> 
 
     <input type="text" name="validity"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

ので、#bodyLeft trターゲット正確に何？

どこにでもtrがあります。

クリックを#bodyLeft.vehicleClassにバインドする必要があるとしますか？ JSコードでは、すべてのセレクタをチェックして、HTMLの構造と一致させます。

または、ターゲットにする必要があるテーブルの関連コードを投稿してください。

編集：私はちょうどテキストをもう一度読んで、テーブルを使用していたことに気付きました。うん、確かにあなたのクエリセレクタを書き換え。あなたが投稿したJSと他のコードの両方で、CSSをチェックするのを忘れないでください。

Answer 2

以下は、あなたのアプローチに従った解決策の1つです。

$('#bodyLeft .divTableRow').bind('click', function(e) { 
 
\t 
 
    var curRow, curSelect, nextRow, nextSelect; 
 
    
 
    curRow = $(this); 
 
    
 
    curSelect = curRow.find('select.vehicleClass'); 
 
    
 
    nextRow = curRow.next(); 
 
    
 
    nextSelect = nextRow.find('select.vehicleClass'); 
 
\t 
 
\t // Following are sample stuff 
 
    // replace with your actual stuff 
 
    curRow.css('background-color', 'yellow'); 
 
    curSelect.css('background-color', 'yellow'); 
 
\t nextRow.css('background-color', 'cyan'); 
 
    nextSelect.css('background-color', 'cyan'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="bodyLeft"> 
 
    <div class="divTableRow"> 
 
    <div class="divTableCell divWidth"> 
 
     <select class="vehicleClass"> 
 
     <option value="volvo">Volvo</option> 
 
     <option value="saab">Saab</option> 
 
     <option value="mercedes">Mercedes</option> 
 
     <option value="audi">Audi</option> 
 
     </select> 
 
    </div> 
 
    <div class="divTableCell divWidth"> 
 
     <input type="text" name="address"> 
 
    </div> 
 
    <div class="divTableCell divWidth" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"> 
 
     <input type="text" name="pass"> 
 
    </div> 
 
    </div> 
 
    <div class="divTableRow"> 
 
    <div class="divTableCell divWidth"> 
 
     <select class="vehicleClass"> 
 
     <option value="volvo">Volvo</option> 
 
     <option value="saab">Saab</option> 
 
     <option value="mercedes">Mercedes</option> 
 
     <option value="audi">Audi</option> 
 
     </select> 
 
    </div> 
 
    <div class="divTableCell divWidth"> 
 
     <input type="text" name="address"> 
 
    </div> 
 
    <div class="divTableCell divWidth" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"> 
 
     <input type="text" name="pass"> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!--Second Division --> 
 
<div id="bodyRight"> 
 
    <div class="divTableRow"> 
 
    <div class="divTableCell width20"> 
 
     <input type="text" name="parts"> 
 
    </div> 
 
    <div class="divTableCell width85"> 
 
     <input type="text" name="ischecked"> 
 
    </div> 
 
    <div class="divTableCell width85" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"> 
 
     <input type="text" name="validity"> 
 
    </div> 
 
    </div> 
 
    <div class="divTableRow"> 
 
    <div class="divTableCell divWidth"> 
 
     <input type="text" name="parts"> 
 
    </div> 
 
    <div class="divTableCell divWidth"> 
 
     <input type="text" name="ischecked"> 
 
    </div> 
 
    <div class="divTableCell divWidth" style="white-space: nowrap;text-overflow: ellipsis;overflow: hidden;"> 
 
     <input type="text" name="validity"> 
 
    </div> 
 
    </div> 
 
</div>