我在 Vuejs 上創建了一個自定義日期時間選擇器組件，我正在使用 jQuery 將父 div 滾動到選定的數字。
由于我在頁面中多次使用此日期時間選擇器組件，因此 jQuery 僅正確影響頁面上使用的第一個組件！
這是 vueJs 上日期時間選擇器組件的一部分：
<div class="date-section-holder">
<div class="years">
<p v-for="year in years" :class="{'active': selectedYear === year}" @click="selectedYear = year">{{ year }}</p>
</div>
<div class="months">
<p v-for="month in months" :class="{'active': selectedMonth === month}" @click="selectedMonth = month">{{ month }}</p>
</div>
<div class="days">
<p v-for="day in days" :class="{'active' : selectedDay === day}" @click="selectedDay = day"> {{ day }}</p>
</div>
</div>
這是 jQuery 的一部分，僅適用于幾天：
$('.days p').on('click', function() {
$($(this).parent()).scrollTop($($(this).parent()).scrollTop() $(this).position().top - 150);
});
而且 jQuery 在打開時對齊所有欄位的部分僅影響使用的第一個組件：
$(document).ready(function() {
$('.days').scrollTop($('.days').scrollTop() $($('.days').find('.active')).position().top - 150);
$('.years').scrollTop($('.years').scrollTop() $($('.years').find('.active')).position().top - 150);
$('.months').scrollTop($('.months').scrollTop() $($('.months').find('.active')).position().top - 150);
})
uj5u.com熱心網友回復：
不需要使用jQuerywith Vue.js，也不推薦使用，因為您可以通過操作 DOMVue.js而不需要jQuery. 你讓它變得復雜。
您可以并且應該使用的是類似PrimeVue. 它提供了許多組件，還有一個日歷，您可以在其中選擇日期和時間。您可以在此檔案中找到有關它的更多資訊：PrimeVue | 日歷
uj5u.com熱心網友回復：
好吧，我不會告訴你不要一起使用 Vue 和 JQ，因為你已經知道了:)
為了將 JQuery 與 Vue 或任何類似的框架一起使用，并不斷以組件的形式重新繪制 dom 的一部分，您需要將事件偵聽器附加到靜態父 dom 元素。
例如：
$('.days p').on('click', function() {
$($(this).parent()).scrollTop($($(this).parent()).scrollTop()
$(this).position().top - 150);
});
應該是這樣的：
$(document).on('click', '.days p', function() {
$($(this).parent()).scrollTop($($(this).parent()).scrollTop()
$(this).position().top - 150);
});
對于第二部分，您可能需要了解添加新組件的時間
$(document).on('DOMNodeInserted', function(e) {
var days = $(e.target).find('.days');
var years= $(e.target).find('.years');
var months= $(e.target).find('.months');
if ( days .length ) {
days.scrollTop(days.scrollTop() $(days.find('.active')).position().top - 150);
}
if ( years.length ) {
years.scrollTop(years.scrollTop() $(years.find('.active')).position().top - 150);
}
if ( months.length ) {
months.scrollTop(months.scrollTop() $(months.find('.active')).position().top - 150);
}
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/315371.html
上一篇：回圈onchange選擇選項
下一篇：文本位置垂直固定，但不是水平固定