在HTML中單擊列表（li）項目不能與jquery一起使用

我是Html，jQuery編碼的新手。我想更改某個li選中（單擊）的項目的背景顏色。我有我的代碼如下：在HTML中單擊列表（li）項目不能與jquery一起使用

#In HTML# 

<div id="major" class="major-funds form-group"><strong>Major funds (above 1.0% market share)</strong> 
<ul> 
<li style="list-style: none; display:inline;padding-left:5px;" class="text-primary" ng-click="GetProducts(x.code)" ng-repeat="x in Major">{{x.code}}</li> 
</ul> 
</div> 

# In controller# 

$('#major li').click(function() { 
    $('li').removeClass('text-primary.selected'); 
    $(this).addClass('text-primary.selected'); 
});

我在做什麼錯？當我點擊li項目時，它不會調用該函數。如果我使用這個動態列表，它不會打這個功能，但如果我使用靜態列表，它確實打這個功能。我應該如何實現動態列表的點擊功能？

來源

2016-05-31 Dhruv Gohil

你不'removeClass'或'addClass'使用點。 –

請提供您的CSS。但我的猜測是你應該在JS部分只使用'selected'而不是'text-primary.selected'。 –

這是CSS中的一個類的名稱，我的問題是當我點擊一個項目時它沒有進入該函數。@ Mike –

click事件被觸發（與執行console.log功能檢查），但您執行操作不正確定義。

$('li').removeClass('text-primary.selected'); 
$(this).addClass('text-primary.selected');

應該

$('li').removeClass('selected'); 
$(this).addClass('selected');

如果是動態生成的列表（沒有在頁面加載DOM），問題可能來自於點擊功能。在這種情況下，只需使用：

$(document).on('click', '#major li', function() { 
    $('li').removeClass('selected'); 
    $(this).addClass('selected'); 
});

在那裏你可以通過列表的容器替換文件。每例如：

$('#major').on('click', 'li', function() { 
    $('li').removeClass('selected'); 
    $(this).addClass('selected'); 
});

這裏是工作示例的jsfiddle：https://jsfiddle.net/ztvdnh86/2/

來源

2016-05-31 08:12:57 Alex

試試這個：

# In controller# 

$('#major li').click(function() { 
    $('li.selected').removeClass('text-primary selected'); 
    $(this).addClass('text-primary selected'); 
});

來源

2016-05-31 07:58:35

你寫的'text-primary.selected'嘗試與類選擇與標籤名稱text-primary元素.selected

你想要做的是去除selected類從類text-primary，然後添加類selected到點擊（選定）元素：

$('#major li').click(function() { 
    $('li.text-primary.selected').removeClass('selected'); 
    $(this).addClass('selected'); 
});

來源

2016-05-31 07:59:05

當我點擊li項目時，它不會調用該函數。

你確定JQuery加載正確嗎？你確定，你沒有爲你的列表項目設置另一個點擊事件嗎？你的CSS定義正確嗎？

無論如何，這對我的作品：

$(document).ready(function() { 
 
    $('#major li').click(function() { 
 
     $('li').removeClass('selected'); 
 
     $(this).addClass('selected'); 
 
     console.log("HERE"); 
 
    }); 
 
});

.selected{ 
 
    background: #FF00FF; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="major" class="major-funds form-group"><strong>Major funds (above 1.0% market share)</strong> 
 
<ul> 
 
<li>XXXXX</li> 
 
<li>YYYY</li> 
 
</ul> 
 
</div>

來源

2016-05-31 08:05:28

在HTML中單擊列表（li）項目不能與jquery一起使用

回答

相關問題