Как установить стили нескольких div и изменить скрытое значение onclick?

Question

На моей домашней странице У меня есть таблица с несколькими строками. Каждый строк содержит одни и те же элементы: - один титул скрытый вход - один DIV, который функционирует как да кнопки - один DIV, который функционирует как не-кнопки

То, что я пытаюсь достичь, когда пользователь нажимает кнопку «да», стиль этого DIV изменяется на «selected», а стиль «no-button» удаляется (возвращается в нормальное состояние). Кроме того, значение скрытого ввода должно быть установлено на «да».

Когда пользователь нажимает кнопку «no-button», происходит то же, что и выше, только на этот раз наоборот (так наоборот) и скрытое входное значение будут установлены на «нет».

Мне нужен javascript, чтобы узнать соответствующие INPUT и DIV, чтобы было установлено, что все скрытые входы установлены, и все DIV изменены. Javascript необходимо найти ближайший DIV и INPUT.

То, что я до сих пор изменяет нажатой DIV, но не удаляет класс другого DIV и не изменяет значение скрытого ввода.

<table width="100%"> 
      <tr> 
       <td> 
        Intern 
        <input type="hidden" name="intern" class="inp-hid"> 
       </td> 
       <td class="profielEditTD"> 
        <table> 
        <tr> 
        <td> 
        <div class="YesBTN"></div> 
        </td> 
        <td> 
        yes 
        </td> 
        <td> 
        &nbsp; 
        </td> 
        <td> 
        <div class="NoBTN"></div> 
        </td> 
        <td> 
        no 
        </td> 
        </tr> 
        </table> 
       </td> 
      </tr> 
     </table> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".YesBTN").click(function(){ 
     $(this).closest(".YesBTN").toggleClass("YesYES"); 
     $(this).parent(".NoBTN").removeClass("NoYES"); 
     $(this).parent(".inp-hid").value = "yes" 
    }); 

    $(".NoBTN").click(function(){ 
     $(this).closest(".NoBTN").toggleClass("NoYES"); 
     $(this).parent(".YesBTN").removeClass("YesYES"); 
     $(this).parent(".inp-hid").value = "no" 
    }); 
}); 

</script> 

Answer 1

В обработчиках событий, this будет относиться к щелкнутому элементу; кнопка. Таким образом, нет причин для найти кнопку с .closest(), так как $(this).closest(".YesBTN") будет точно так же, как $(this) в обработчике «YesBTN».

С другой стороны, найти соответствующую кнопку «Нет» будет требует глядя вверх по дереву DOM для общего предка, а затем, глядя вниз по дереву для другой кнопки:

$(this).closest(".profielEditTD").find(".NoBTN").removeClass("NoYES"); 

Это не совершенно ясно из HTML в вашем вопросе, но найти это поле ввода, я думаю, вы должны использовать его имя:

$("input[name='intern']").val("yes"); 

, например.