показать div на основе значения текстового поля

Question

показать div на основе значения текстового поля

0

У меня есть поле ввода, которое получает его значение из db, давайте скажем, что это значение M, K, H, J, V или G в зависимости от значения, которое необходимо открыть div с aaa, bbb, ccc, ddd, eee или fff как текст.

Код, который отображается на странице, следующий, я оставил часть извлечения из db, что часть работает (поле ввода показывает M, K, H, J, V или G в зависимости от идентификатора).

echo "<input type='text' name='periode' id='periode' data-related-item='" .$row['periode']. "' value='" .$row['periode']. "'>";
echo "<div class='hidden'><div id='M'>aaa</div></div>";
echo "<div class='hidden'><div id='K'>bbb</div></div>";
echo "<div class='hidden'><div id='H'>ccc</div></div>";
echo "<div class='hidden'><div id='J'>ddd</div></div>";
echo "<div class='hidden'><div id='V'>eee</div></div>";
echo "<div class='hidden'><div id='G'>fff</div></div>";

Когда я проверяю исходный код в режиме разработчика, он показывает, что часть, связанная с данными, правильно извлекается из db:

<input type="text" name="periode" id="periode" data-related-item="M" value="M">

Я хочу использовать следующий JS, но мне нужно изменить его для работы с текстовыми полями.

<script type="text/javascript">
function evaluate1(){
var item = $(this);
var relatedItem = $("#" + item.attr("data-related-item")).parent();

if(item.is(":checked")){
    relatedItem.fadeIn();
}else{
    relatedItem.fadeOut();   
}
}

$('input[type="checkbox"]').click(evaluate1).each(evaluate1);
</script>

Самый простой подход - это переход на смену:

$('input[type="checkbox"]').click(evaluate1).each(evaluate1);

в

$('input[type="textbox"]').click(evaluate1).each(evaluate1);

Но что мне нужно сделать:

if(item.is(":checked")){

Спасибо за любую помощь заранее.

Я попробовал следующее, но это не работает.

if(item.is("M||K||H||J||V||G")){

РЕШЕНИЕ РОБЕРТА РОЗАСА

Решение находится в jsfiddle

http://jsfiddle.net/dXTtz/7/

HennySmafter 03 окт. 2013, в 16:59

Источник

0

Почему бы вам не выполнить вызов ajax и не загрузить требуемый вывод в div в соответствии с введенной вами строкой?
Naruto 03 окт. 2013, в 14:11
1

Я не знаю, как сделать вызов ajax, и я не ввожу строку. значения M, K, H, J, V или G извлекаются из БД. Я не заполняю их.
HennySmafter 03 окт. 2013, в 14:12
0

Я думаю, что ваш вопрос немного не так? Итак, вы хотите чекбоксы / выпадающие / ..? чтобы заполнить и нажать на них, вы хотите div с указанным текстом?
Naruto 03 окт. 2013, в 14:24
1

значения M, K, H, J, V или G извлекаются из БД и вставляются в текстовое поле. Теперь я хочу js-код, который показывает div id M, когда текстовое поле - M, или show div id J, когда textbox - J. Мой вопрос усложняется, потому что я пытаюсь сделать это с помощью кода, который я выбрал из Интернета. я не могу просто попросить кого-нибудь написать для меня код, который был бы самым простым способом, но также раздражает всех участников SO.
HennySmafter 03 окт. 2013, в 14:27
0

Хорошо, вы только что полностью потеряли меня: единственное, что я могу сказать: 1. Вы создаете div в соответствии со значением, которое вы получили из вашей БД, или создаете что-то вроде выпадающего списка, а затем создаете div в соответствии с этим, но если вы загружаете в все данные в текстовом поле, вы не можете ничего с этим поделать?
Naruto 03 окт. 2013, в 14:36
0

Позвольте мне попытаться спросить об этом по-другому, возможно, это проясняет ситуацию. У меня есть 6 div, эти div имеют следующие идентификаторы M, K, H, J, V или G. Я хочу показать div M, когда значение текстового поля равно M, и скрыть все остальные. PS Спасибо за помощь.
HennySmafter 03 окт. 2013, в 14:40
0

Когда значение текстового поля равно M, показать div M и скрыть div k, h, j, v, g Если значение текстового поля равно k, показать div k и скрыть div m, h, j, v, g Если значение текстового поля равно j, показать div j и скрыть div m, k, h, v, g
HennySmafter 03 окт. 2013, в 14:42

Показать ещё 5 комментариев

Теги:

php

javascript

html

textbox

1 ответ

Ещё вопросы

Почему бы вам не выполнить вызов ajax и не загрузить требуемый вывод в div в соответствии с введенной вами строкой?
Я не знаю, как сделать вызов ajax, и я не ввожу строку. значения M, K, H, J, V или G извлекаются из БД. Я не заполняю их.
Я думаю, что ваш вопрос немного не так? Итак, вы хотите чекбоксы / выпадающие / ..? чтобы заполнить и нажать на них, вы хотите div с указанным текстом?
значения M, K, H, J, V или G извлекаются из БД и вставляются в текстовое поле. Теперь я хочу js-код, который показывает div id M, когда текстовое поле - M, или show div id J, когда textbox - J. Мой вопрос усложняется, потому что я пытаюсь сделать это с помощью кода, который я выбрал из Интернета. я не могу просто попросить кого-нибудь написать для меня код, который был бы самым простым способом, но также раздражает всех участников SO.
Хорошо, вы только что полностью потеряли меня: единственное, что я могу сказать: 1. Вы создаете div в соответствии со значением, которое вы получили из вашей БД, или создаете что-то вроде выпадающего списка, а затем создаете div в соответствии с этим, но если вы загружаете в все данные в текстовом поле, вы не можете ничего с этим поделать?
Позвольте мне попытаться спросить об этом по-другому, возможно, это проясняет ситуацию. У меня есть 6 div, эти div имеют следующие идентификаторы M, K, H, J, V или G. Я хочу показать div M, когда значение текстового поля равно M, и скрыть все остальные. PS Спасибо за помощь.
Когда значение текстового поля равно M, показать div M и скрыть div k, h, j, v, g Если значение текстового поля равно k, показать div k и скрыть div m, h, j, v, g Если значение текстового поля равно j, показать div j и скрыть div m, k, h, v, g

Hackerman · Accepted Answer · 2013-10-03T13-31-00.000Z

Я сделал этот код на основе кода, который вы предоставляете:

$(document).ready(function(){

$("#periode").keyup(function(){
 var valor = $("#periode").val();
    $(".hidden").each(function(){
     var hijo = $(this).children().attr('id');   
     if(hijo == valor)
     {
      $(this).removeClass("hidden");
     }
    });
});

});

Рабочая скрипка здесь: http://jsfiddle.net/robertrozas/dXTtz/2/

Этот способ работает с загрузкой страницы: http://jsfiddle.net/robertrozas/dXTtz/4/

Загрузка страницы и удаление лишних скрытых div: http://jsfiddle.net/dXTtz/5/

Спасибо, это очень близко к тому, что я хочу. Я сделал небольшое изменение. jsfiddle.net/dXTtz/3 Как мне нужно изменить JavaScript, чтобы он работал при загрузке страницы. потому что значение не набрано, а получено из базы данных.
Спасибо за ваше редактирование (загрузку страницы), это блестящее решение. Но когда значение равно H, как в этом jsfiddle.net/dXTtz/5, тогда оно показывает много пустого пространства, как я могу избавиться от этого пробела.
извините глупый вопрос мой последний комментарий мне нужно изменить часть CSS, конечно, на .hidden {display: none}
Это потому, что другой div все еще существует, но скрыт ... если это выполнить при загрузке страницы ... подождите, я обновлю ответ снова;)
Спасибо тебе большое за это. Это замечательно, я не понимаю код, но я пытаюсь понять это. Главное, что это работает!