0
私はjQueryを使用してマウスを動かしたときにクラスを変更するためにブートストラップポップオーバーのボタンを取得しようとしていますが、何らかの理由でそれが機能していません。私はどこでも見てきましたが、jQueryのホバーイベントのために他の人と同じメソッドを使用していますが、何らかの理由でそれが機能していないだけです。この場合、jQueryのホバー方式が機能しないのはなぜですか？
ホバーでbtn btn-defaultからbtn btn-successにクラスを変更しようとしています。私はこれがCSS（色の変化）を使って達成できることを理解していますが、これはうまくいくと考えられていて動作していないので、理由を知りたいのです。
私が使用しています：3.3.6、jQueryのブートストラップ
全体のHTMLファイル：
<!DOCTYPE html>
<html>
<head>
<title>Easy ToDo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/1.0.2/bootstrap-native.min.js"></script> -->
<script>
function checkTaskStatus(checkbox) {
var tasktext = document.getElementById('tasktext');
var taskrow = document.getElementById('taskrow');
if (checkbox.checked){
taskrow.className = "active";
tasktext.className = "text-muted";
tasktext.style.textDecoration = "line-through";
}
else {
document.getElementById("taskrow").className = "warning";
document.getElementById('tasktext').className = "text-success";
tasktext.style.textDecoration = "none";
}
}
function changeBtn(button) {
var temp = button.className;
if(temp === "btn btn-primary") {
button.className = "btn btn-danger";
button.innerText = "Close";
}
else {
button.className = "btn btn-primary";
button.innerText = "Add New Task";
}
}
</script>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover({
html: true,
title: 'New Task',
trigger: 'click',
content: function() {
return $('.popoverContent').html();
},
placement: 'right'
});
});
</script>
<script>
$(document).ready(function() {
$("#btntask").hover(function() {
$(this).removeClass('btn btn-default');
$(this).addClass('btn btn-success');
}, function() {
$(this).removeClass('btn btn-success');
$(this).addClass('btn btn-default');
});
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<h1 style="border: 2px solid rebeccapurple; margin-top: 0; background-color: rebeccapurple; color: white; padding-left: 0.6em; padding-bottom: 0.1em; margin-bottom: 1.5em;">An Easy To - Do Web App!</h1>
<button type="button" class="btn btn-primary" style="margin-bottom: 15px; margin-left: 10px;" data-toggle="popover" onclick="changeBtn(this)">Add New Task</button>
<div class="popoverContent hide">
<label for="newTask">Task:</label>
<textarea rows="3" name="newTask" class="form-control input-lg" placeholder="Task HTML"></textarea>
<button class="btn btn-default" type="submit" style="margin-top: 10px;" id="btntask">Done</button>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th style="width: auto"> </th>
<th style="width: auto">#</th>
<th style="width: auto">Date</th>
<th style="width: auto">Task</th>
<th style="width: auto">Notes</th>
</tr>
</thead>
<tbody>
<tr class="warning" id="taskrow">
<td><div class="checkbox"><label><input type="checkbox" onclick="checkTaskStatus(this)"></label></div></td>
<td scope="row" style="font-weight: bold;">1</td>
<td><p style="font-style: italic; font-weight: bold;">7th May, 2016</p></td>
<td class="text-success" id="tasktext" style="text-decoration: none;"><h5 id="task-heading" style="margin-top: 0; text-decoration: underline; font-weight: bold;">Tesla Share Purchase Reasearch:</h5>
<ul>
<li>Find out how an Australian citizen can purchase shares in an American company (e.g. Tesla) which is not listed on the ASX (Australian Stock Exchange)</li>
<li>Prepare a brief list of the steps, costs and general time frame for an Australian to get set up to purchase share in American companies</li>
<li>Please also state the current stock price of Apple, Google (potentially Alphabet as they are the parent??), Facebook, Twitter and Tesla</li>
<li>Bullet points are fine</li>
<li>Please include any relevant links</li>
<li>Spend no longer than 1.5 – 2 hours on this</li>
</ul>
</td>
<td><div class="form-group">
<textarea class="form-control input-md" rows="4" placeholder="Notes"></textarea>
<button class="btn btn-default btn-block" type="submit" style="margin-top: 10px;">Save</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
注意私の部分の任意の不正確さがあるので、もし私がjQueryとJSにかなり新しいです、 、それらを指摘してください。
あなたのコードは正常に動作しています。作業デモを見て、余分なマークアップを削除しました。http://codepen.io/harishgadiya/pen/GZzOZo –
関連性は表示されません。あなたのリンクにはドロップダウンがあり、ホバー機能はありません – 4127157
私のコードはうまくいきません。ID #btnTaskのボタンはクラスを変更するはずですが、そうではありません。 – 4127157