Question

我有一个web项目，我将一些问题与创建的html代码注入html页面。由于动态创建了这些html对象，我不知道会有多少问题以及它们的ID是什么。我需要得到选定的答案。

这里有一段动态创建的html代码和一些带JSFiddle演示的javascript函数。 nextPage函数，我尝试获取所选答案不起作用。

function nextPage() {
var results = new Array();
var contents = $(this).parents("div").parents("div").find("input");
contents.filter(":checked").each(function () {
    var idx = $(this).index();
    results.push($(this).parent().children().get(idx + 1).innerHTML);
    alert($(this).parent().children().get(idx + 1).innerHTML);
});
contents.filter(":text").each(function () {
    results.push($(this).val());
});

alert(results.join(";"));
pageNumber += 1;
window.location = '#question' + pageNumber;
}

JSFiddle Demo

如何获得所选答案？任何帮助将不胜感激。

Answer 1

尝试以下（是您正在寻找的）：

 var pageNumber = 1, isLastPage = 2, results = [];

function nextPage() {

  var contents = $('#question' + pageNumber).find(".answers");    

  contents.filter(":checked").each(function () {        
    var text = $(this).next().find("span.ui-btn-text").text();
     if( text == undefined || text == ""){
         text = $(this).parent().next().text();
     }
    results.push(text);       
  });

   pageNumber += 1;

  if(pageNumber > isLastPage){
     alert("Test Finished, all answers are : " + results.join(";"));
     return;   
  }
   window.location = '#question' + pageNumber;
}

function prevPage() {
   pageNumber -= 1;
   window.location = '#question' + pageNumber;
}

在这里工作小提琴：http://jsfiddle.net/REthD/5/

我希望它有所帮助。

Answer 2

我已将@ maverickosama92解决方案更新为更简单的方法，看看这是否是您所需要的。

在这里工作小提琴http://jsfiddle.net/REthD/7/

更简单的方法：

var pageNumber = 1, isLastPage = 2, results = [];

function Responses()
{
    var jqResponses = $('body').find(":checked");
    var arrResponses = [];
    jqResponses.each(function(){
        arrResponses.push($('label[for*="' + this.id + '"]').text());
    })

    alert('Responses: ' + arrResponses.join(";"))
}

function nextPage() {

    pageNumber += 1;

    if(pageNumber > isLastPage){
        Responses();    
        return;   
    }
    window.location = '#question' + pageNumber;
}

function prevPage() {
    pageNumber -= 1;
    window.location = '#question' + pageNumber;
}

Answer 3

由于你没有用jquery创建你的click事件，你的$（this）没有得到按钮元素，它正在获取window对象。然后将窗口对象传递给jquery。

从onclick调用时函数中 this 的值 event将是对全局（窗口）对象的引用。（see link）

您可以通过使用jquery添加点击事件来解决此问题，并从html中删除 onclick =“nextPage（）”。类似的东西（当然你应该只将它应用于“下一个按钮”）：

$('input[type=button]').bind('click',nextPage);

或者你可以继续在html中使用你的 onclick =“nextPage（）”，你可以点击这样的按钮：

var $clickedButton = $(this.event.target);

所以你的功能将是：

function nextPage() {

    var results = new Array();
    var contents = $(this.event.target).parents("div").parents("div").find("input");
    contents.filter(":checked").each(function () {
        var idx = $(this).index();
        results.push($(this).parent().children().get(idx + 1).innerHTML);
        alert($(this).parent().children().get(idx + 1).innerHTML);
    });
    contents.filter(":text").each(function () {
        results.push($(this).val());
    });

    alert(results.join(";"));
    pageNumber += 1;
    window.location = '#question' + pageNumber;
}

NEW JSFiddle updated demo

我对jquery mobile不太了解。而且我不知道将事件放在html上是绑定点击事件的最佳方式，但我想用jquery绑定点击事件会更好。

JSFiddle binding events with jquery

如何从动态创建的html对象中使用jquery检索数据

3 个答案: