2016-07-26 1 views
0

나는 매우 이상한 문제로 고통 받고 있습니다. 여러 요소의 클래스를 변경하려면 Jquery 사용하고 있습니다. js 쪽에서 for 루프를 사용하고 있습니다. 요소를 클릭하면 클래스가 'selected'로 표시되고 배경이 변경됩니다. 그러나 실제로보기가 변경되지는 않습니다.jquery로 클래스를 변경하지만 HTML보기 측면에서 반영하지 않습니다.

이상한 점은보기 측면에서 변경 사항을 볼 수 없다는 것입니다. 그러나 요소를 위로 할 때 클래스가 있어야합니다.

HTML 측

<li id="1469532600" class="slot ng-binding ng-scope time-slot" ng-repeat="slot in timeSlots">17:00</li> 

위로를 ELEMENT

나는 정확한 해결책을 찾을 수 없습니다입니다

enter image description here

...

당신은 같은 클래스 이름을 변경하려면 각 방법을 사용할 수 있습니다
+0

CSS와 자바 스크립트 코드를 게시하십시오. 문제를 재현 할 수있는 바이올린을 만드는 것이 더 좋습니다. 그리고 왜 JQuery를 사용하여 클래스 시도 클래스를 변경하고 있습니까? – Manish

답변

0

<!DOCTYPE html> 
 
<html> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<body> 
 
<style> 
 
.selected{color:green;} 
 
</style> 
 
<script> 
 
var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.names=[ 
 
{name:'Jani',country:'Norway'}, 
 
{name:'Hege',country:'Sweden'}, 
 
{name:'Kai',country:'Denmark'}]; 
 

 
$scope.makeSelect = function(index){ 
 
\t 
 
    $scope.names[index].selected = true; 
 
} 
 
}); 
 

 

 
</script> 
 

 
<div ng-app="myApp" ng-controller="myCtrl" ng-init=""> 
 

 
<p>Looping with objects:</p> 
 
<ul> 
 
    <li ng-class="names[$index].selected==true ? 'selected':''" ng-repeat="x in names" ng-click="makeSelect($index);"> 
 
    {{ x.name + ', ' + x.country + '------'+x.selected }}</li> 
 
</ul> 
 

 
</div> 
 

 
</body> 
 
</html>

관련 문제