#jquery #function #variables
#jquery #функция #переменные
Вопрос:
Из-за заголовка этот вопрос может показаться проще, чем он есть на самом деле. Во-первых, мои знания, привычки и навыки работы с jQuery в лучшем случае шаткие, так что, скорее всего, я просто пытаюсь сделать что-то глупым способом, который имел бы смысл только для новичка.
У меня есть страница, сгенерированная php, которая создает кучу текстовых полей на основе внешних данных. Эти поля должны быть преобразованы в своего рода гибридное поле автозаполнения пользовательского интерфейса jQuery / Combobox (похожее на combo, но допускающее свободный текст). Я застрял при попытке назначить .click(функцию (…)) кнопке выпадающего списка, и я полагаю, что это связано с тем фактом, что я выполняю jQuery для преобразования всех текстовых полей через цикл for, и переменная i не передается должным образом в функцию .click.
Вот полная тестовая страница, с которой я работаю (почти все массивы HTML и js будут сгенерированы с помощью php):
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" href="../includes/css/redmond/jquery-ui-1.8.11.custom.css" rel="stylesheet" />
<script type="text/javascript" src="../includes/jquery-1.5.js"></script>
<script type="text/javascript" src="../includes/jquery-ui-1.8.10.custom.min.js"></script>
<style>
.ui-button { margin-left: -1px;width:18px; }
.ui-button-icon-only .ui-button-text { padding: 0; }
button.ui-button-icon-only {width:18px;height:21px;}
.ui-autocomplete-input { margin: 0; padding: 0; }
</style>
</head>
<body>
<form method="post" action="results.php">
<input class="TC_1" type="text" name="TC_1_1" value="E02_04" />
<script>
var availableTags = [['test1','test2','test3']];
</script>
<br/>
<input class="TC_1" type="text" name="TC_2_1" />
<script>
availableTags.push (['test5','test7','test9']);
</script>
<input type="submit" />
</form>
<script type='text/javascript'>
//<![CDATA[
var input = new Array();
var i = 1;
$('.TC_1').each(function(index) {
input[i] = $("[name=TC_" i "_1]").autocomplete({
source: availableTags[i-1],
select: function(){alert("selected");},
minLength: 0
}).addClass("ui-widget ui-widget-content ui-corner-left");
$("<button type='button'>amp;nbsp;</button>")
.attr("tabIndex", -1)
.attr("title", "Show All Items")
.insertAfter(input[i])
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass("ui-corner-all")
.addClass("ui-corner-right ui-button-icon")
.click(function() {
var $input = $(this).before();
if ($input.autocomplete("widget").is(":visible")) {
$input.autocomplete( "close" );
return;
}
$(this).blur();
$input.autocomplete("search", "" );
$input.focus();
});
i ;
});
//]]>
</script>
</body>
</html>
Буду признателен за любую помощь.
Редактировать: Извините, я забыл добавить, что я получаю «Ошибка: ввод [i] не определен Строка: 62»
Комментарии:
1. Не могли бы вы уточнить, в чем проблема?
2. Вы должны создать замыкания, чтобы использовать правильное значение i . Здесь вы можете найти информацию о замыканиях в разделе «Печально известная проблема цикла»
3. Кстати, у вас есть
indexпеременная изeachфункции. Используйте ее вместоiпеременной. Конечно, вы можете изменить ее имя наi. При внесении этого изменения не забудьте удалить последнее приращение, каждая функция делает это за вас.4. Извините, ребята, мне трудно объяснить проблему, сохраняя при этом простоту объяснения, и мое отсутствие опыта работы с jQuery не помогает.
Ответ №1:
ОК. Я обновил свой ответ после нового исходного кода.
Попробуйте.
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" href="../includes/css/redmond/jquery-ui-1.8.11.custom.css" rel="stylesheet" />
<script type="text/javascript" src="../includes/jquery-1.5.js"></script>
<script type="text/javascript" src="../includes/jquery-ui-1.8.10.custom.min.js"></script>
<style type="text/css">
.ui-button { margin-left: -1px;width:18px; }
.ui-button-icon-only .ui-button-text { padding: 0; }
button.ui-button-icon-only {width:18px;height:21px;}
.ui-autocomplete-input { margin: 0; padding: 0; }
</style>
</head>
<body>
<form method="post" action="results.php">
<input class="TC_1" type="text" name="TC_1_1" value="E02_04" />
<br/>
<input class="TC_1" type="text" name="TC_2_1" />
<input type="submit" />
</form>
<script type="text/javascript">
//<![CDATA[
$('.TC_1').each(function(i) {
var availableTags = [];
availableTags.push(['test1','test2','test3']);
availableTags.push(['test5','test7','test9']);
$(this).autocomplete({
source: availableTags[i],
select: function(){alert("selected");},
minLength: 0
}).addClass("ui-widget ui-widget-content ui-corner-left");
$("<button type='button'>amp;nbsp;</button>")
.attr("tabIndex", -1)
.attr("title", "Show All Items")
.insertAfter(this)
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass("ui-corner-all")
.addClass("ui-corner-right ui-button-icon")
.click(function() {
var $input = $(this).prev();
$input.autocomplete("destroy");
$input.val("search").select();
});
});
//]]>
</script>
</body>
</html>
Комментарии:
1. Я больше не получаю сообщение об ошибке, но когда я нажимаю на кнопки, выпадающий список не отображается.
2. Вам не нужно добавлять доступные теги между входными данными. Итак, я немного изменил это и внес некоторые улучшения.
3. Спасибо за помощь, но это все еще не работает. Причина, по которой доступные теги находятся между полями, заключается в том, что я хотел смоделировать, как php собирался добавлять эти значения.
Ответ №2:
Наконец-то разобрался, ну вроде как. У меня было ощущение, что следующий обходной путь сработает, однако я отчасти надеялся, что найдется более элегантный способ сделать это.
.click(function() {
//Get the name for the target field:
var target = $(this).attr('id');
target = target.substr(3);
// close if already visible
if ($("[name=TC_" target "]").autocomplete("widget").is(":visible")) {
$("[name=TC_" target "]").autocomplete( "close" );
return;
}
$(this).blur();
$("[name=TC_" target "]").autocomplete("search", "" ); //where the error occurs
$("[name=TC_" target "]").focus();
});
И я также присвоил кнопке уникальное имя, соответствующее полю…
$("<button id='bt_" i "_1' type='button'>amp;nbsp;</button>")
Спасибо за помощь, ребята.