Question

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

在用户注册之前，我正在设置一个会话变量，其值应为“发布者”或“读者”，具体取决于他们点击的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>

client.js（尝试将会话变量设置为'reader'或'publisher'，具体取决于他们点击的两个div）

Template.authJoinType.events({
'click div.join-type-inner': function(e, tmpl) {
    var userType = $(e.target).find('#userTypeSelect').val();
    Session.set('userType', userType);
    var selectedUserType = Session.get('userType');
    console.log(selectedUserType); // this is printing out 'undefined'
}
});

帮助？我是否以不正确的div为目标？

Answer 1

变化：

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

要：

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

Answer 2

您必须为HTML中的每个元素使用唯一的id，但您已将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'
}
});

Answer 3

您的代码存在以下问题：

您有重复的id属性，这些属性无效且会导致您的JS出现问题 - 正如您所发现的那样。
value属性对div元素无效。您可以使用data-*属性将自定义数据存储在元素中。
div元素不能放在内联a元素中，请将其更改为span。
鉴于您定义的点击事件位于.join-type-inner元素上，您不需要执行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>

Template.authJoinType.events({
    'click div.join-type-inner': function(e, tmpl) {
        var userType = $(e.target).data('value');
        Session.set('userType', userType);
        var selectedUserType = Session.get('userType');
        console.log(selectedUserType); // should say 'reader' || 'publisher' depending on clicked link
    }
});

Answer 4

这适用于引用该帖子的任何人。得到的工作答案如下所示。请为此答案投票给sanki。我只是重新铺设信息。

HTML：

<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>

client.js

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);
}
});

从html'value'属性中检索值

4 个答案: