Как выбрать первый элемент данного класса с помощью jquery?

-1

Это отладочный вопрос. Я выбрал эту черту, проверил документацию jQuery по первому() селектору и прочитал множество сообщений о переполнении стека, но ни одна из настроек, которые я сделал на основе этого исследования, не сработала.Как выбрать первый элемент данного класса с помощью jquery?

ЦЕЛЬ: В нижеприведенном фрагменте я пытаюсь удалить класс «скрытый» из первой из серии div, которые были добавлены в dom, используя jquery в верхней части документа document.ready() ,

$(document).on('click','#begin',function(){ 
     $('#intro').addClass('hidden'); 
     $('#form').removeClass('hidden'); 
     $('.question').first().css({'visibility':'hidden'}); 
    });

ПРОБЛЕМА: По какой-то причине, когда я использую первый() селектор, все вопросы оставаться скрытым. Когда я не буду использовать его, как и ожидалось, все вопросы будут раскрыты. Эти div были добавлены динамически, используя jQuery с вопросами классов и «скрытыми».

Фрагмент выше находится в строке 50 примера кода, который я прикрепляю. Объявление этих классов происходит в строке 30.

/** 
 
* Created by davidgoldberg on 10/16/14. 
 
*/ 
 

 
function Question(topic,question,choices,correctAnswer){ 
 
    this.topic = topic; 
 
    this.question = question; 
 
    this.choices = choices; 
 
    this.correctAnswer = correctAnswer; 
 
    this.userAnswer = null; 
 
} 
 

 
var allQuestions; 
 
allQuestions = [ 
 
    new Question("Addition", "What is 8 + 8?", [16, 18, 64, 28], 16), 
 
    new Question("Subtraction", "What is 23-8?", [16, 15, 14, 17], 15), 
 
    new Question("Multiplication", "What is 8 * 8?", [16, 18, 64, 36], 64), 
 
    new Question("Division", "What is 48/16", [3, "3/2", 4, "8/3"], 3), 
 
    new Question("Imaginary Numbers", "What is \u221A(-1)^8?", ["i", "-i", 1, -1], 1) 
 
]; 
 

 

 
function qToHTML(question) { 
 
    var header = "<h2>" + question.topic + "</h2>"; 
 
    var qText = "<p>" + question.question + "</p>"; 
 
    var options = ""; 
 
    for (var i = 0; i < question.choices.length; i++) { 
 
     options += "<input type='radio' name='" + question.topic + "' value ='" + question.choices[i] + "'>" + question.choices[i] + "<br>"; 
 
    } 
 
    var wrapper = "<div class='question'></div>"; 
 

 
    var HTMLstring; 
 
    HTMLstring = header + qText + options; 
 
    $("form").append(HTMLstring).wrap(wrapper); 
 
} 
 

 

 

 
$(document).ready(function(){ 
 

 
    //set up page 
 
    for(var i = 0; i < allQuestions.length; i++){ 
 
     qToHTML(allQuestions[i]); 
 
    } 
 
    $('form').append('<input type="submit" value="submit">'); 
 
    
 
    // setup intro 
 
    $(document).on('click','#begin',function(){ 
 
     $('#intro').addClass('hidden'); 
 
     $('#form').removeClass('hidden'); 
 
     $('.question').first().css({'visibility':'hidden'}); 
 
    }); 
 
    
 
    // in-form navigation 
 
    $('#next').on('click',function(){ 
 

 
    }); 
 

 
    //collect and check user answers 
 
    $('form').on('submit', function(event) { 
 

 
     var numCorrect = 0; 
 

 
     event.preventDefault(); 
 

 
     for(var i = 0; i < allQuestions.length; i++) { 
 

 
      // collect answers 
 
      var currentQ = allQuestions[i]; 
 
      currentQ.userAnswer = $("input[name='" + currentQ.topic + "']:checked").val(); 
 

 
      // check answers 
 
      if (currentQ.correctAnswer == currentQ.userAnswer) { 
 
       numCorrect++; 
 
      } 
 
     } 
 

 
     // show score 
 
     var score = numCorrect + "/" + allQuestions.length; 
 
     $('#results').find('p').text("You got " + score + " of the questions right"); 
 
     $('#results').removeClass('hidden'); 
 

 
     // resets buttons  
 
     $('input[type="radio"]').each(function(){ 
 
      $(this).prop('checked', false); 
 
     }); 
 
    }); 
 
});

.hidden { 
 
    display: none; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>Dynamic Quiz</title> 
 
     <link rel="stylesheet" type="text/css" href="styles.css"> 
 
    </head> 
 
    <body> 
 
     <h1>Dynamic Quiz</h1> 
 
     
 
     <div id='intro'> 
 
      <h3>Get ready for the dynamic quiz</h3> 
 
      <p>You will be asked a questions from a range of different math subjects. Selecting an answer will bring you to the next page. The 'next' and 'back' buttons do just what you expect. When you are finished, click the 'submit' button at the bottom of the page, and you will be directed to your score. When you are ready, click the 'begin' button below.</p> 
 
      <input type="button" id="begin" value="begin"> 
 
     </div> 
 

 
     <div id='form' class='hidden'> 
 
      <form> 
 
        
 
        <!-- <div class="question hidden"> 
 
         <h2></h2> 
 
         <p></p> 
 
         <input type="radio" name="" value=""> 
 
         <input type="radio" name="" value=""> 
 
         <input type="radio" name="" value=""> 
 
         <input type="radio" name="" value=""> 
 
         
 
         <input type="submit" value="submit"> 
 
        </div> --> 
 
       
 
      </form> 
 
      <span id="nav-buttons"> 
 
       <button id="previous">previous</button> 
 
       <button id="next">next</button> 
 
      </span> 
 

 
     </div> 
 
     <div id="results" class="hidden"> 
 
      <h2>Results:</h2> 
 
      <p></p> 
 
     </div> 
 

 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
     <script src="script.js"></script> 
 
    </body> 
 
</html>

источник

2014-10-20 Goodword

Один выбирает первый элемент в классе так же, как я сделал в приведенном выше фрагмент коды. Проблема заключалась не в механизме отбора классов - это была ошибка в функции javascript, которая порождает вопросы.

Была ошибка, которая мешала мне выбрать первый элемент в классе. В функции, которая следует за этим абзацем, вызов .wrap (wrapper) обертывает элемент «form» в divs с классом = «вопрос» - не отдельные вопросы, как я предполагал.

function qToHTML(question) { 
    var header = "<h2>" + question.topic + "</h2>"; 
    var qText = "<p>" + question.question + "</p>"; 
    var options = ""; 
    for (var i = 0; i < question.choices.length; i++) { 
     options += "<input type='radio' name='" + question.topic + "' value ='" + question.choices[i] + "'>" + question.choices[i] + "<br>"; 
    } 
    var wrapper = "<div class='question'></div>"; 

    var HTMLstring; 
    HTMLstring = header + qText + options; 
    $("form").append(HTMLstring).wrap(wrapper); 
}

Вот пересмотренная функция:

функция qToHTML (вопрос) {

var header = "<h2>" + question.topic + "</h2>"; 
var qText = "<p>" + question.question + "</p>"; 
var options = ""; 
for (var i = 0; i < question.choices.length; i++) { 
    options += "<input type='radio' name='" + question.topic + "' value ='" + question.choices[i] + "'>" + question.choices[i] + "<br>"; 
} 

var HTMLstring; 
HTMLstring = header + qText + options; 
HTMLstring = "<div class='question hidden'>" + HTMLstring + "</div>"; 
$("form").prepend(HTMLstring);

}

источник

2014-10-22 01:03:43 Goodword

Рассмотрим с помощью следующей() и Prev() из библиотеки JQuery для этого, и класс для текущего видимого элемента. Например, в настоящее время видимый элемент, имеющий class="visibleQuestion" ниже:

$('#next').on('click', function(){ 
    var v = $(".visibleQuestion"); 
    v.next().addClass("visibleQuestion").show(); 
    v.removeClass("visibleQuestion").hide(); 
});

псевдокод выше, но может дать вам некоторые идеи.

Вот скрипка с супер простым примером: http://jsfiddle.net/fmj34ejg/

источник

2014-10-20 23:30:55 trnelson

Спасибо, что будет очень полезно, когда я получаю динамически добавлять и удалять классы сортируются. Любая идея, что с этим не получается? – Goodword

@Goodword не слишком уверен. Смотря сейчас. Я обновил свой ответ с помощью примера jsfiddle, чтобы показать, о чем я думал. Не уверен, что я нахожусь на пути именно с тем, что вам нужно, теперь, когда я смотрю на него. :) – trnelson

спасибо. Это определенно поможет. Думаю, я должен был задать свой вопрос немного яснее – Goodword

Как выбрать первый элемент данного класса с помощью jquery?

ответ

Смежные вопросы