答案按钮(正确,错误,是和否)没有出现

时间:2012-10-04 23:33:12

标签: javascript jquery html

我无法在附加行中显示“True”,“False”,“Yes”和“No”按钮。

我在这里有一个申请:Application

请按照以下步骤使用应用程序:

1。当您打开应用程序时,您将看到一个绿色加号按钮,单击     在此按钮上,将出现一个模态窗口,其中包含一个搜索栏。

2。在搜索栏中键入以下“橙色”(不带双精度)     引号)然后提交搜索。

第3。将出现与搜索中的术语匹配的行     在“问题”栏下。你会在“答案”下看到     列的答案是“真”。请单击“添加”按钮     添加行中的内容。

4。您将在右侧看到它显示的内容     “True”和“False”按钮以及“True”按钮突出显示     绿色。这很好。

但下面是问题发生的地方:

1。单击“添加问题”按钮,这将添加一行     在下面并将从上面复制控件。

2。现在你刚刚添加的行中你会看到另一个绿色     加号按钮,单击此按钮并再次执行步骤2和3。

您可以在附加行中看到它根本不显示“True”或“False”按钮。所以我的问题是,在附加的行中,当我从模态窗口添加一个问题时,如果答案为“True”或“False”,它不会显示“True”或“False”按钮?这也可以通过“是”和“否”按钮来实现。

整个代码显示在这里的jsfiddle中(打开模态窗口的函数位于小提琴的javascript部分的底部):

http://jsfiddle.net/WZKrP/6/

CODE:

function plusbutton(plus_id) {
    // Set global info
    plusbutton_clicked = plus_id;
    // Display an external page using an iframe
    var src = "previousquestions.php";
    $.modal('<iframe src="' + src + '" style="border:0;width:100%;height:100%;">');
    return false;
}

    function addwindow(numberAnswer, gridValues, btn) {

        if (btn == "True" || btn == "False" || btn == "Yes" || btn == "No") {
            var answers = '#answer' + btn;
            var answersrow = '#answer' + btn + 'Row';
        } else {
            var answers = $.map(btn.split(''), function(chr) {
                return "#answer" + chr;
            }).join(', ');
            var answersrow = $.map(btn.split(''), function(chr) {
                return "#answer" + chr + "Row";
            }).join(', ');
        }

        var myNumbers = {};
        myNumbers["True or False"] = "True or False";
        myNumbers["Yes or No"] = "Yes or No";

        gridValues = myNumbers[gridValues];

        if ($(plusbutton_clicked).attr('id') == 'mainPlusbutton') {



            if (gridValues == "True or False") {
                $('#btn' + 'TrueorFalse').trigger('click');

            }

            else if (gridValues == "Yes or No") {
                $('#btn' + 'YesorNo').trigger('click');
            }



            $('#answerSection').find('.answerBtnsOn').trigger('click');
            $(answers).trigger('click');

        } else {

            if (gridValues == "True or False") {
                $(plusbutton_clicked).closest('tr').find('input.gridTxtRow').val(gridValues).parent().append($('.optionTypeTbl'));
                $('#btn' + 'TrueorFalse').trigger('click');

            }

            else if (gridValues == "Yes or No") {
                $(plusbutton_clicked).closest('tr').find('input.gridTxtRow').val(gridValues).parent().append($('.optionTypeTbl'));
                $('#btn' + 'YesorNo').trigger('click');
            }


        }

        $('#btn' + gridValues).trigger('click');
        $(plusbutton_clicked).closest('tr').find('.answerBtnsOn').trigger('click');
        $(plusbutton_clicked).closest('tr').find(answersrow).trigger('click');


        $.modal.close();
        return false;
    }​

顶部加按钮的HTML:

<table id="question">
<tr>
<td colspan="2">
<a onclick="return plusbutton();">
<img src="Images/plussign.jpg" width="30" height="30" alt="Look Up Previous Question" class="plusimage" id="mainPlusbutton" name="plusbuttonrow"/>
</a>
<span id="plussignmsg">(Click Plus Sign to look up Previous Questions)</span>
</td>
</tr>
</table>

下面是jquery代码,它为每一行附加一个加号按钮:

$('.plusimage').each( function() {

    var $this = $(this);
var $plusimagerow = $("<a onclick='return plusbutton(this);'><img src='Images/plussign.jpg' width='30' height='30' alt='Look Up Previous Question' class='imageplus'/></a>").attr('name',$this.attr('name')+"[]")
               .attr('value',$this.val());

$plusrow.append($plusimagerow);

});

2 个答案:

答案 0 :(得分:2)

每个按钮的内联样式定义存在问题(<input class='answerBtnsRow answers' type='button' style='**display:none**' ...>每当您应用CSS类answerBtnsOn时,没有指定将显示更改回内联,阻止等的指令。您可以在answerBtnsOn类中添加一行但是使用!important指令,因此它将覆盖由jQuery代码定义的内联样式:display:inline !important

另一种方法是利用jQuery(例如:$('#element').css('display', '');)来更改或删除jQuery脚本中的内联样式,它将按钮设置为不可见。

我肯定会更新answersrBtnsOn和answerBtnsOff类,避免使用任何内联样式定义。

希望这有帮助....如果您有任何问题或疑虑,请告诉我们。

答案 1 :(得分:0)

看,我觉得我不理解你。这是你想要做的吗? enter image description here