Как скрыть некоторый элемент с помощью jquery, используя какое-либо значение элемента в качестве условия?

0

У меня есть следующий html:

<button id="hideToggle">show/hide</button>
<form id="item">
    <div>Item 1 <input name="item1" type="number"/></div>
    <div>Item 2 <input name="item2" type="number"/></div>
    <div>Item 3 <input name="item3" type="number"/></div>
</form>

Как я могу скрыть каждый <div> внутри <form> при условии, что при <button>, если значение <input> больше 0, то оно не будет скрыто, иначе <div> будет скрыто?

Как написать javascript и/или jquery, необходимые для этого?

  • 0
    ну, может быть, для значения, отличного от 0 или '' они будут скрыты. что-то вроде того
  • 0
    Что вы хотите сделать, если value не является числом (например, текст)?
Показать ещё 4 комментария
Теги:

3 ответа

1
Лучший ответ
$("#hideToggle").click(function(){
    $("#item").find("input").each(function(){
        if(this.value <= 0) {
           $(this).parent().toggle();
        }
    });
});

$("#showAll").click(function(){
   $("#item").children("div").show();
});

JSFiddle

Поделиться
  • 1
    Именно то, что я писал, ха-ха.
  • 0
    Это не показывает непревзойденные скрытые элементы при втором клике.
Показать ещё 5 комментариев
0

Попробуй это:

$(document).on("click","#hideToggle",function(){
  $("#item input").each(function(){
    if(!(parseInt($(this).val()) > 0)){
        $(this).parent().hide();
     }
   });
});
Поделиться
0

Вот код, который также проверяет, является ли значение Number. Все описания приведены в комментариях:

//attach click listener to the button
$(document).on("click", "#hideToggle", function(){
    //get all input type="number", descendant to "#item"
    var inputs = $("#item").find("input[type='number']");

    //go over each input
    $.each(inputs, function(index, elem){
        //try to parse it value as a number
        var number = parseInt($(elem).val());

        //if value is a number
        if(!isNaN(number)){
            var hideCondition =  number <= 0;

            if(hideCondition) {
                //hide the parent div
                $(elem).parent("div").hide();
            }
        } else {
         //do something if value is not a number 
        }
    });
});

Вот демонстрация

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню