【问题标题】：Jquery to take value inside function onclickJquery在函数onclick内取值
【发布时间】：2019-06-23 10:03:03
【问题描述】：

这个小脚本从选择中获取值

<script>
jQuery(document).ready(function() 
{
var clv1=jQuery("#tr_val").val();
});
</script>

当点击这个div并执行函数open_win时，我需要在函数jQuery("#tr_val").val();

中发送select的值

<div onclick="open_win(""+clv1,'test');">Test</div>

问题是我不知道当点击 div 测试时在函数 open_win 内插入值 "clv1" 的正确语法如何写

我只有这个问题，我尝试了不同的组合，但我从来没有用过

非常感谢

【问题讨论】：

标签： javascript jquery onclick

【解决方案1】：

您可以添加一个全局变量，并在更改您的选择时修改该变量。

在 div 元素上，您可以添加 id，并将事件处理程序写入脚本标记（在这里您可以访问该全局变量）。

注意：但是全局变量不是正确的方法，但你可以这样做来学习/测试。

【讨论】：

【解决方案2】：

我认为这就是您所要求的，我已经重新组织了一些事情。现在有一个自定义函数，您可以从 div 的内联 onclick 调用。我认为这可以简化流程。

如果这不是您所希望的，请告诉我。

演示

// Add a function which you call from the inline onclick
function open_win() {

  // Gather the value of the input
  console.log( $("#tr_val").val() );

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="tr_val" value="one">

<div onclick="open_win()">Test</div>

【讨论】：

【解决方案3】：

您可以尝试这样的事情，将值存储在div 的data 属性中，然后在函数内部访问它。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
function open_win(){
  $(this).data("val", $("#tr_val").val());
  console.log($(this).data('val'));
}
</script>
<div onclick="open_win()">Test</div>
<select id="tr_val">
  <option value="value1">Value 1</option>
  <option value="value2">Value 2</option>
  <option value="value3">Value 3</option>
</select>

注意：您的open_win 函数必须在调用之前定义。

【讨论】：

【解决方案4】：

如果您想在单击 div 时获取 ID 为 tr_val 的元素的值，请尝试这样的操作。将点击事件也放入javascript中。此外，如果你想运行一个像你试图内联的函数，你需要定义该函数，但也可以在脚本标签/js文件中使用它

function open_win(someArg) {
  // do something
}

<div class="test-class">Test</div>

<script>

$(document).ready(function() {
  var clv1 = $("#tr_val").val();

  // anonymous function
  $('.test-class').on('click', function(e) {
    console.log(clv1);
  })

  // named function with a parameter
  $('.test-class').on('click', function(e) {
    open_win(clv1);
  })

  // if you wanted named function with parameter to look a bit cleaner
  // using es6 arrow function
  $('.test-class').on('click', (e) => open_win(clv1))

  // name function no param (event is the first argument passed in by default but you can't pass params in like this)
 $('.test-class').on('click', open_win)
});
</script>

【讨论】：

【解决方案5】：

你可以使用 ES6 的方式

<h1>Hello World!</h1>
<input id="tr_val" value="element value" hidden>

<div class="open-div" data-text='test'>Test</div>

(function ($) {

  $(function () {
    let tr_val = $('#tr_val').val();

    $('.open-div').on('click', function (e) {
      let $this = $(this);
      let text = $this.data("text");

      console.log(tr_val);
      console.log(text);
    });
  });

})(jQuery);

https://codepen.io/nsivanoly/pen/OemWNM

【讨论】：