テストと呼ばれるエンティティが約 500 ~ 1000 行あり、それぞれにコンポーネントがあります。これらのコンポーネントは、ユーザーがテストにカーソルを合わせたときに表示される必要があります。mouseover
では、div でコンポーネント情報を表示し、で非表示にしますmouseout
。ハードコーディングされた上と左の位置で問題なく実行できます。ただし、その div をカーソルの右側に 50 ~ 100 px の間隔で表示できるようにする必要があります。
それを行うためにコードを変更するにはどうすればよいですか?
$(".test_row").mouseover(function (event) {
fillTestComponents(test, testId);
});
$(".test_row").mouseout(function (event) {
$("#testCompHolder").hide();
});
function fillTestComponents(test, testId) {
$.ajax({
type: 'GET',
url: "@Url.Action("GetTestComponents", "Templates", new { area = "Orders" })",
data: { testIdentifier: testId },
async: false,
success: function (data) {
var componentCount = data.length;
if (componentCount != 0) {
componentsHtml = "<p><u>" + test + "</u></p><ul>";
for (var i = 0; i < componentCount; i++) {
componentsHtml = componentsHtml + "<li>(" + data[i].TestIdentifier + ") " + data[i].Description + "</li>"
}
componentsHtml += "</ul>";
$('#testCompHolder').html(componentsHtml);
$("#testCompHolder").show();
}
else {
componentsHtml = "<p>No components exist for this test.</p>";
$("#testCompHolder").show();
}
},
error: function () {
alert('An error occurred while loading the results.');
}
});
}
HTML:
<div id="testCompHolder" style="display:none; padding: 4px; border: 2px black solid; background-color: #dddddd; position: fixed; top: 300px; left: 380px;">