1

我的应用程序有一个区域需要用户同意一个声明，并且我正在使用 Javascript/jQuery，因此当用户选择“是”时，它会自动将日期/时间输入到只读字段中。

虽然我无法重现它，但我有多个用户告诉我，当他们选择“是”时，它不会填充日期/时间，并且由于该字段是只读的，他们无法自己输入。

我的代码中是否有任何非常规的内容会在特定浏览器中导致上述问题？任何人都可以在他们的机器上重现这个吗？

这是一个工作示例：http: //jsfiddle.net/YL2Wd/

HTML：

<div>
    <label>I agree:*</label>
    <span class="options">
        <label for="agreement_no">No</label>
        <input type="radio" class="required authorization" value="0" id="agreement_no" name="agreement">

        <label for="agreement_yes">Yes</label>
        <input type="radio" class="required authorization" value="1" id="agreement_yes" name="agreement">
    </span>
</div>
<div class="description">
    Agreement Text
</div>
<div class="question">
    <label for="authorization_timestamp">Date/Time*</label>
    <input type="text" readonly="readonly" maxlength="100" class="authorization_timestamp required" name="authorization_timestamp" id="authorization_timestamp">
</div>

Javascript：

$('.authorization[id$="yes"]').on('change', function() {

    var dateStr;

    if ($(this).val() == 1) {

        var now = new Date();

        var month = now.getMonth() + 1;
        var day = now.getDate();
        var year = now.getFullYear();
        var h = now.getHours();
        var m = now.getMinutes();
        var s = now.getSeconds();

        month = month < 10 ? "0" + month : month;
        day = day < 10 ? "0" + day : day;
        h = h < 10 ? "0" + h : h;
        m = m < 10 ? "0" + m : m;
        s = s < 10 ? "0" + s : s;

        dateStr = month + "/" + day + "/" + year + " " + h + ":" + m + ":" + s
    }

    $(this).parent().parent().nextAll().find(".authorization_timestamp").first().val(dateStr);

});

$('.authorization[id$="no"]').on('change', function() {

    var dateStr;
    dateStr = "";
    $(this).parent().parent().nextAll().find(".authorization_timestamp").first().val(dateStr);

});
4

3 回答 3

2

代替

 $(this).parent().parent().nextAll().find(".authorization_timestamp").first().val(dateStr);

只需使用

 $("#authorization_timestamp").val(dateStr);

这意味着你应该去寻找id或class指向那个元素。

演示

尽量避免 .next().next()... 链接。因为它很脆，会导致 html 中断。总是尝试使用id或class指向元素。一些浏览器会导致问题并在那里创建空文本节点。

如果您根本不感兴趣更改您的代码（不好，您应该）然后

    $(this)
        .parent()   // go to span
        .parent()  // jump to parent div
        .next()   // .description div
        .next('.question') // .question div
        .find('.authorization_timestamp')  // find the input
        .val(dateStr); // set value

并对您的查询进行一些编辑：

  $(this)
        .parent()
        .parent()
        .nextAll('.question')
        .find(".authorization_timestamp")
        .val(dateStr);

根据您的评论：

试试这样：

var index = this.id                          // get id of radio
                  .replace('agreement','')   // replace agreement string
                  .replace('_yes','');       // replace yes string
                                             // output: 1, 2, 3 ...

$("input#authorization" + index + '_timestamp')   // get the target input field 
                                                  // using that index, because your
                                                  // html is synchronous with index
                                    .val(dateStr);

演示

我这样做是为了yes，同样是为了no。

于 2012-06-06T01:50:48.393 回答
1

我修改了你的JSFiddle来演示一个简单的方法来做到这一点。基本上，当您动态创建单选按钮输入时，添加一个data-timestamp指向相关时间戳文本框的动态生成 ID 的属性，如下所示：

<input type="radio" class="required authorization" value="0" id="agreement1_no" data-timestamp="authorization1_timestamp" name="agreement1">
<input type="radio" class="required authorization" value="1" id="agreement1_yes" data-timestamp="authorization1_timestamp" name="agreement1">

然后，在您的 jQuery 函数中，获取该属性的值并将其用作 jQuery 选择器来设置文本框的值。

var targetElement = "#" + $(this).attr("data-timestamp");
$(targetElement).val(dateStr);
于 2012-06-06T02:39:38.330 回答
0

thecodeparadox 已经向您展示了该怎么做$("#authorization_timestamp").val(dateStr);。它在某些浏览器中可能不起作用的原因可能是因为空文本节点是围绕 HTML 元素创建的。

如果您将 HTML 更改为不包含任何空格，则您的选择器应该可以工作。话虽如此，使用类似的代码

$(this).parent().parent().nextAll()

是通过对 HTML 进行任何细微更改来破坏代码的可靠方法。

在不使用 ID 的情况下使其工作 如果可能有多个authorization_timestamps，则无法分配 id。使它成为一个类并使用类似下面的东西

<!-- Add a div with a class around all your HTML so you can properly 
     walk up and back down to the search field to your form wrapper -->
<div class="form-wrapper">old content</div>...

现在找到您的元素，如下所示

$(this).parents(".form-wrapper").find("authorization_timestamp");

我在这里创建了一个工作示例：http: //jsfiddle.net/YL2Wd/11/我还改进了您的代码，因此它不需要两个单独的处理程序。

于 2012-06-06T02:04:21.707 回答