如何在knockout.js css-binding中添加「clicked」條件？

的CSS結合在knockout.js如下提供了一個示例的文檔：如何在knockout.js css-binding中添加「clicked」條件？

<div data-bind="css: { profitWarning: currentProfit() < 0 }"> 
    Profit Information 
</div> 

    <script type="text/javascript"> 
    var viewModel = { 
    currentProfit: ko.observable(150000) // Positive value, so initially we don't apply the "profitWarning" class 
}; 
    viewModel.currentProfit(-50); // Causes the "profitWarning" class to be applied 
</script>

好像這個例子中應用「profitWarning」 currentProfit是負的。我想稍微改變一下，並在點擊div時應用這個類。我怎樣才能在這個例子中應用「點擊」條件？另外，我想使多個div，並在同一時間（應用的樣式被點擊一個div時將其取出被點擊另一個DIV時）應用的樣式只有一個

感謝

來源

2017-05-29 Dukakus17

您可以使用點擊綁定。

click綁定添加了一個事件處理函數，以便在關聯的DOM元素被單擊時調用您選擇的JavaScript函數。這是最常見的喜歡按鈕，輸入和元素使用，但任何可見的DOM的Elemen

http://knockoutjs.com/documentation/click-binding.html

這裏的實際工作是一個例子：

function viewModel() { 
 
    var self = this; 
 
    self.isSelected = ko.observable(false); 
 
    self.className = ko.pureComputed(function(){ 
 
    return self.isSelected()? "SelectedClass" : "NotSelectedClass"; 
 
    }, self); 
 
    self.change = function() { 
 
    self.isSelected(!self.isSelected()); 
 
    } 
 
} 
 

 
ko.applyBindings(new viewModel());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<div data-bind="text: className"></div> <br/> 
 
<div data-bind="css: className">Inspect this Div</div> <br/> 
 
<input type="button" data-bind="click: change" value="Toggle" />

對於第二個問題，您可以爲每個div提供幾個布爾值來檢查哪個被點擊，設置一個點擊b y用戶設置爲true，然後將其餘設置爲false。

來源

2017-05-29 23:55:24 muhihsan

非常感謝！我還有一個問題。單擊時是否可以更改文本的顏色，並且僅在使用css-binding單擊另一個文本時才能更改爲其原始顏色？（不是點擊綁定） – Dukakus17

必須使用兩者，必須使用單擊綁定來觸發單擊事件，並且必須使用css綁定來相應地更改css className。你不能只使用CSS，因爲你將無法觸發點擊事件。 – muhihsan

如何在knockout.js css-binding中添加「clicked」條件？

回答

相關問題