将 HTML 属性从 onclick 事件传递给 jQuery 函数答案

【问题标题】：Passing HTML attribute to jQuery function from onclick event将 HTML 属性从 onclick 事件传递给 jQuery 函数
【发布时间】：2023-04-07 15:50:01
【问题描述】：

我在将 html 元素之一传递给 jQuery 时遇到问题。我知道使用attr() 我们可以访问属性。不过我觉得我做错了什么。

这是我的简单 jQuery 函数：

<script type="text/javascript">
    function test(value) {
        alert(value);
    }
</script>

我有一个由 foreach 循环创建的动态列表框：

<select  multiple="multiple" name="factors1" id="main_factors" style="width: 200px; height: 200px;">

<?php foreach ($array as $option): ?>
    <option onclick="test(<script>this.attr('title').value</script>);"
            id="<?php echo $option[0]; ?>"
            title="<?php echo $option[2]; ?>" 
            value="<?php echo $option[0]; ?>">
        <?php echo $option[1]; ?>
    </option>
<?php endforeach ?>

</select>

例如，当有人单击列表框中的项目时，我希望其项目显示在我的消息框中。但是这段代码对我不起作用。

onclick="test(<script>this.attr('title').value</script>);"

如何将标题属性值从 onclick 属性发送到我的函数？

提前致谢。

【问题讨论】：

标签： php jquery attributes onclick

【解决方案1】：

onclick="test(this)"

function test(value)
{
    alert($(value).attr('title'));
}

see demo

【讨论】：

@user108: onchange 事件在使用select 元素时优于onclick 事件

【解决方案2】：

试试这个代码。我认为你的代码有误。

<select  multiple="multiple" name="factors1" id="main_factors" style="width: 200px; height: 200px;" onchange="test(this.value);">

<?php foreach ($array as $option): ?>
<option id="<?php echo      $option[0]; ?>" title="<?php echo $option[2]; ?>" 
value="<?php  echo $option[0]; ?>"><?php echo $option[1]; ?></option>
<?php endforeach ?>


</select>

在你的 jQuery 中：

<script type="text/javascript">
    function test(value)
       {
        alert(value);
       }
    </script>

【讨论】：

onchange 事件在使用select 元素时优于onclick 事件
onchange 事件应在<select> 上定义，以便在更改时捕获选项的值。看我的回答。

【解决方案3】：

您应该需要在select 元素上使用onchange 事件。

<select onchange="test(this.value)">

JavaScript：

function test(value) {
    alert(value)        
}

SEE DEMO

【讨论】：

【解决方案4】：

由于您已经导入并正在使用 jQuery，最好将事件处理程序与 html 元素分开，作为一种设计与功能的分离：

从您的 php 中完全删除 onclick：

<select  multiple="multiple" name="factors1" id="main_factors" style="width: 200px; height: 200px;">
<?php foreach ($array as $option): ?>
<option id="<?php echo $option[0]; ?>" title="<?php echo $option[2]; ?>" 
value="<?php  echo $option[0]; ?>"><?php echo $option[1]; ?></option>
<?php endforeach ?>
</select>

并从 javascript 中将函数绑定到 change 事件：

$(document).ready(function() {
    $('#main_factors').change( function() {
        test( $(this).val() );
        // you can also do:
        // test( this.value );
    });
});

function test(value)
{
    alert(value);
}

【讨论】：