Javascript 从html'中检索值；价值'；属性

如何检索名为“value”的html元素属性中定义的实际值

在用户注册之前，我将设置一个会话变量，该变量的值应为“publisher”或“reader”，具体取决于用户单击的div。此会话值将在用户创建时使用

<template name="authJoinType">
<div class="container join-type">
    <div class="row"> 

        <div class="col-xs-6 col-sm-6 col-md-6">
            <a href="{{pathFor route = 'join'}}">
            <div class="join-type-inner" id="userTypeSelect" value="reader">Reader</div>
        </a>
        </div> 

        <div class="col-xs-6 col-sm-6 col-md-6">
            <a href="{{pathFor route = 'join'}}">
            <div class="join-type-inner" id="userTypeSelect" value="publisher">Publisher</div>
        </a>
        </div>

    </div>
</div>
</template>

---

帮忙？我一开始是针对不正确的div吗

您必须为HTML中的每个元素使用唯一的

id

s，但您已经为多个元素使用了

id=“userTypeSelect”

，因此请更改它

您可以使用

.attr（'value'）

来读取div的value属性。此处

.val（）

将不会作为

div工作，虽然您可以使用名为
value
的属性，但它本身没有值

并修改脚本，如下所示

Template.authJoinType.events({
'click div.join-type-inner': function(e, tmpl) {
    //use 'this' reference to read value attribute,
    //here 'this' is the clicked element
    var userType = $(this).attr('value');
    Session.set('userType', userType);
    var selectedUserType = Session.get('userType');
    console.log(selectedUserType); // this is printing out 'undefined'
}
});

您的代码有几个问题：


您有重复的
id
属性，这是无效的，会导致JS出现问题-正如您所发现的
value
属性对于
div
元素无效。您可以改为使用
data-*
属性在元素中存储自定义数据
div
元素不能放置在内联
a
元素中，请将它们更改为
span

假设您定义的单击事件位于
元素上，则不需要执行
find（）
，因为
e.target
是您需要的元素


试试这个：

<template name="authJoinType">
    <div class="container join-type">
        <div class="row"> 
            <div class="col-xs-6 col-sm-6 col-md-6">
                <a href="{{pathFor route = 'join'}}">
                    <span class="join-type-inner" data-value="reader">Reader</span>
                </a>
            </div> 
            <div class="col-xs-6 col-sm-6 col-md-6">
                <a href="{{pathFor route = 'join'}}">
                    <span class="join-type-inner" data-value="publisher">Publisher</span>
                </a>
            </div>
        </div>
    </div>
</template>

更改：

var userType = $(e.target).find('#userTypeSelect').val();

致：

这是为任何引用该帖子的人准备的。得到的工作答案如下所示。请投桑基的票。我只是在重新发布信息

html:

使用类作为
userTypeSelect
而不是id，因为id应该是唯一的，然后更改
.find（'#userTypeSelect'）.val（）
到这个
.find（'.userTypeSelect'）.html（）
不能有两个或多个元素具有
id=“userTypeSelect”
，这不是有效的HTML。@Atul我不想获取HTML“Reader”或“Publisher”，我想将值嵌入元素中感谢您的洞察力，click事件尚未将值打印到控制台中，span将引导网格布局弄乱。似乎正在div元素中检索value属性。我删除了重复的ID并实现了sanki的更改。是的，长官！这是开箱即用的。我将删除两个相同的ID，因为这是不正确的做法，而且对我的代码来说没有必要。谢谢你，桑基
var userType = $(e.target).find('#userTypeSelect').val();

var userType = $(e.target).attr("value");

<template name="authJoinType">
<div class="container join-type">
<div class="row"> 

    <div class="col-xs-6 col-sm-6 col-md-6">
        <a href="{{pathFor route = 'join'}}">
        <div class="join-type-inner" value="reader">Reader</div>
    </a>
    </div> 

    <div class="col-xs-6 col-sm-6 col-md-6">
        <a href="{{pathFor route = 'join'}}">
        <div class="join-type-inner" value="publisher">Publisher</div>
    </a>
    </div>

</div>

Template.authJoinType.events({
'click div.join-type-inner': function(e, tmpl) {
    var userType = $(e.target).attr("value");
    Session.set('userType', userType);
    var selectedUserType = Session.get('userType');
    console.log(selectedUserType);
}
});