javascript - 根据主体类值的值填充字段

标签 javascript jquery html

我正在尝试使用 body 元素中的类填充表单中的字段,该类以“pageid-”开头,后面有一个数字。我想找到这个数字,并将其添加为表单值,这样我就可以在每个页面上使用相同的表单,但可以识别表单提交的页面。

我仍在学习 Java/JQuery,所以很抱歉不知道如何返回这里的值。它以 [object Object] 的形式出现 - 这就是我目前拥有的:

HTML

<body class="pageid-1232">

<input type="text" id="test1" value="">

</body>

Javascript

var thisid = $('[class^="pageid-"]');

$(document).ready(function () {
    $("#test1").val( thisid );
});

http://jsfiddle.net/Gg6AG/44/

最佳答案

我建议:

$(document).ready(function(){
    // converts the classList - an Array-like list of class-names - of
    // of the <body> element/node into an Array; and then filters that
    // Array of class-names using Array.filter.prototype(), to retain
    // only those classes for which the inner comparison return true:
    var classValue = Array.from( document.body.classList ).filter(function(c){
        // 'c' (the first argument of the method) is the
        // array-element of the Array over which we're iterating
        // and is supplied by the Array method.

          // here we return only those class-names that have
          // a string of numbers ('\d+') before the end of
          // string ('$'), using RegExp.test() to return
          // a Boolean, true: the string matches the regexp,
          //            false: the string does not match:
                    return /\d+$/.test(c);

                // here we assume only one matching class-name,
                // and user Array.prototype.join('') to convert
                // that single-element array into a String 
                // and split that class-name on the '-' character:
                }).join('').split('-')
                // and use Array.prototype.pop() to retrieve
                // the last element of the returned Array:
                .pop();

    // finding the element with the id 'test1' and setting
    // its value property to the found-value:
    document.getElementById('test1').value = classValue;
});

JS Fiddle demo .

顺便说一句,原因是:

$("#test1").val( thisid );

无法工作是因为 thisid 是一个 jQuery 对象,当您尝试通过传递对象(对象,而不是对象属性)来设置字符串值时,JavaScript 引擎将尝试将该对象强制转换为字符串表示形式,这将生成 [object Object] 值,这可以通过以下方式验证:

console.log({}.toString());

var obj = {};

document.querySelector('input').value = obj;

console.log(obj.toString());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input />

或者进行更多比较演示:

console.log($('body'));

var obj = $('body');

document.querySelector('input').value = obj;

console.log(obj.toString());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input />

关于javascript - 根据主体类值的值填充字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37593151/

相关文章:

javascript - 单击选项卡不更改 div

javascript - 在 jquery 中迭代以获取输入文本的值

javascript - iOS 浏览器上的 HTMLScriptElement 属性为空

javascript - 如何在发布前设置TextBox的文本值?

javascript - 动态调整 JQuery thickbox 窗口的大小

javascript - 如何在悬停时隐藏图像的标题

javascript - 如果在此期间发生其他事件,如何停止调用延迟函数?

javascript - 如果鼠标到达屏幕最左边执行一个 Action

javascript - 我可以为 onclick 事件定义一个 Ruby 函数吗?

javascript - 不活动期后断开 jquery 连接