Найти одно значение атрибута данных из нескольких значений JQuery
Я изо всех сил пытаюсь найти единственное значение данных. Ниже мой пример кода:
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type = "text" data-aclass = "Question1" />
<input type = "text" data-aclass = "inQuestion1 Attention" />
<input type = "text" data-aclass = "inQuestion2 Physical" />
$(':text[data-aclass^=Que]').on("change", function() {
var currentQuestion = "",
inQuestion = "";
currentQuestion = $(this).data("aclass");
var inQ = "in" + currentQuestion;
inQuestion = $("[data-aclass='" + inQ + "']");
});
Здесь $("[data-aclass='" + inQ + "']") дает мне длину 0, и если я удалю Attention из атрибута data, он даст мне желаемый результат.
Что мне делать в этом случае?
Ответы 1
Проблема в том, что ваш селектор - [data-aclass='inQuestion1'], для которого требуется соответствие точный по значению, но элементы, которые вы ищете, имеют другие значения в атрибуте, а также inQuestionN. Таким образом, вам также необходимо использовать селектор 'атрибут начинается с':
$(':text[data-aclass^=Que]').on('change', function() {
var currentQuestion = '', inQuestion = '';
currentQuestion = $(this).data('aclass');
var inQ = 'in' + currentQuestion;
inQuestion = $('[data-aclass^ = "' + inQ + '"]'); // note ^ here
console.info(inQuestion.length);
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type = "text" data-aclass = "Question1" />
<input type = "text" data-aclass = "inQuestion1 Attention" />
<input type = "text" data-aclass = "inQuestion2 Physical" />Редактировать:
Учитывая ваши комментарии ниже относительно жадных совпадений с inQuestion10 и т. д., Тогда обходным путем было бы использовать вместо этого filter(). Затем вы можете разделить атрибут данных на массив и определить, содержится ли в нем точное значение:
$(':text[data-aclass^=Que]').on('change', function() {
var currentQuestion = $(this).data('aclass');
var inQ = 'in' + currentQuestion;
var $inQuestion = $('[data-aclass]').filter(function() {
var values = $(this).data('aclass').split(' ');
return values.indexOf(inQ) != -1;
});
console.info($inQuestion.data('aclass'));
console.info($inQuestion.length);
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type = "text" data-aclass = "Question1" />
<input type = "text" data-aclass = "inQuestion1 Attention" />
<input type = "text" data-aclass = "inQuestion2 Physical" />
<input type = "text" data-aclass = "inQuestion10 Physical" />
<input type = "text" data-aclass = "inQuestion111 Physical" />В этом случае я бы предложил разделить ваши атрибуты data, например data-aclass = "inQuestion1" data-type = "Attention". Затем вы можете использовать селектор атрибута equals, как вы это делали изначально.
Я бы с удовольствием, если бы мог. Позвольте мне рассказать вам точный сценарий. В приложении, над которым я работаю, есть элемент управления Form Builder, в котором можно перетаскивать текстовое поле и устанавливать его свойства. В свойстве «Advance class» текстового поля, если я напишу «inQuestion1 Attention», значение будет установлено в его атрибуте «data-aclass». Итак, как вы предложили, разделить атрибут данных в моем случае невозможно. Подскажите, пожалуйста, как можно обойтись?
Нет проблем рад помочь
Привет, @Rory, в этом случае начинается с, но что, если элементов 20? Если есть «Question1», то мне нужен только «inQuestion1», а не все элементы, в которых есть «inQuestion11,12,13 ...». Спасибо.