动作变化的延迟jQuery

我正在Symfony的一个项目中工作。我有一个表有一些行，每行的结尾有四个选项。根据每行中选择的选项，我希望整行的颜色发生改变。现在，这段代码可以在jsfiddle上正常工作，但是在我的项目中，对于每一行，当我第一次选择某个选项时，没有任何效果，颜色不会改变。当我第二次选择某个选项时，颜色会改变。这适用于所有行。我希望颜色能够像第一次在jsfiddle中改变一样。链接在这里：https://jsfiddle.net/wqeob4jo/2/动作变化的延迟jQuery

PS：我用的REACT JS

$(document).ready(function() { 
 
    $('select').change(function() { 
 
    var selectedVal = this.value; 
 
    if (selectedVal == "2") { 
 
     $(this).closest('tr').removeClass().addClass('not_wanted') 
 
    } else if (selectedVal == "3") { 
 
     $(this).closest('tr').removeClass().addClass('not_available') 
 
    } else if (selectedVal == "4") { 
 
     $(this).closest('tr').removeClass().addClass('vacation') 
 
    } else if (selectedVal == "5") { 
 
     $(this).closest('tr').removeClass().addClass('priority_off') 
 
    } 
 
    }); 
 
});

table td, 
 
th { 
 
    border: 1px solid black; 
 
    padding-left: 100px; 
 
} 
 
th { 
 
    color: black; 
 
} 
 
tr.not_wanted { 
 
    color: red; 
 
} 
 
tr.not_available { 
 
    color: blue; 
 
} 
 
tr.vacation { 
 
    color: orange; 
 
} 
 
tr.priority_off { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="table"> 
 
    <tr style="background-color:grey;"> 
 
    <th>Col 1</th> 
 
    <th>Col 2</th> 
 
    <th>Col 3</th> 
 
    </tr> 
 
    <tr class="options"> 
 
    <td>Date 1</td> 
 
    <td>Date 2</td> 
 
    <td> 
 
     <select id="select"> 
 
     <option value="2">not_wanted</option> 
 
     <option value="3">not_available</option> 
 
     <option value="4">vacation</option> 
 
     <option value="5">priority_off</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
    <tr class="options"> 
 
    <td>Date 1</td> 
 
    <td>Date 2</td> 
 
    <td> 
 
     <select id="select"> 
 
     <option value="2">not_wanted</option> 
 
     <option value="3">not_available</option> 
 
     <option value="4">vacation</option> 
 
     <option value="5">priority_off</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
</table>

来源

2016-03-04 trollster

在Symfony项目中，您的颜色更改代码是否会有另一个javascript冲突？除非存在冲突/代码不同，否则请不要在Symfony第一次在jsFiddle上工作时找不到原因。 – toomanyredirects

我不知道。毫无疑问，通过一些JavaScript代码动态加载，但我无法弄清楚究竟发生了什么问题。 – trollster

尝试在回调函数内添加一个'console.log'行，然后在控制台中查看消息？如果它是第一次触发，但没有发生颜色变化将是一个很好的起点。 – toomanyredirects

我用

$(document).on('change','#select',function() {...

，而不是

$('select').change(function() {...

修复了这个问题

全功能：

$(document).on('change','#select',function() { 
    var selectedVal = this.value; 
    if (selectedVal == "2") { 
     $(this).closest('tr').removeClass().addClass('not_wanted'); 
    } else if (selectedVal == "3") { 
     $(this).closest('tr').removeClass().addClass('not_available'); 
    } else if (selectedVal == "4") { 
     $(this).closest('tr').removeClass().addClass('vacation'); 
    } else if (selectedVal == "5") { 
     $(this).closest('tr').removeClass().addClass('priority_off'); 
    } 
    });

希望它有帮助！

来源

2016-03-04 16:37:06 Observer

对不起，但即使后来的效果已经无效。这不起作用。 – trollster

我不关注。在JS fiddle https://jsfiddle.net/wqeob4jo/4/和我的电脑上的本地HTML中都很好用。 – Observer

动作变化的延迟jQuery

回答

相关问题