Question

我将文件名存储在隐藏输入的值中，我希望在单击“下载”或“重命名”标签时获取文件名。比如当我点击第一个元素下载li时我得到file1，我该怎么办？谢谢！

function Download() {
  alert("filename I clicked");
}

Html

   <ul>
       <li >  <input type="hidden" value="file1" /> <span onclick="Download()">Download</span>   <span onclick="Rename()">Rename</span> </li>
       <li >  <input type="hidden" value="file2" /> <span onclick="Download()">Download</span>   <span onclick="Rename()">Rename</span> </li>
       <li >  <input type="hidden" value="file3" /> <span onclick="Download()">Download</span>   <span onclick="Rename()">Rename</span> </li>
   </ul>

Answer 1

您可以使用jquery和closest为generic和download提供rename，如下所示。

此外，您可以function Download方式摆脱jquery。

＆＃13;

$(document).ready(function(){
  $('span.download, span.rename').on('click', function() {
    var span = $(this);
    var fileName = span.closest('li').find('input[type="hidden"]').val();
 
    if(span.is('.download')) {
       // download part
      alert('Download: ' + fileName);
    } else if(span.is('.rename')) {
       // rename part
      alert('Rename: ' + fileName);
    }
  });
});

＆＃13;

.download, .rename {
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
       <li >  <input type="hidden" value="file1" /> <span class="download">Download</span>   <span class="rename">Rename</span> </li>
       <li >  <input type="hidden" value="file2" /> <span class="download">Download</span>   <span class="rename">Rename</span> </li>
       <li >  <input type="hidden" value="file3" /> <span class="download">Download</span>   <span class="rename">Rename</span> </li>
   </ul>

＆＃13;

Answer 2

对您的HTML做一些小修改，您可以使用jQuery的siblings选择器来获取相应的input元素，然后从中获取值：

＆＃13;

function Download(el) {
  alert($(el).siblings("input").val());
}

var Rename = Download;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <input type="hidden" value="file1" /> <span onclick="Download(this)">Download</span>  <span onclick="Rename(this)">Rename</span> 
  </li>
  <li>
    <input type="hidden" value="file2" /> <span onclick="Download(this)">Download</span>  <span onclick="Rename(this)">Rename</span> 
  </li>
  <li>
    <input type="hidden" value="file3" /> <span onclick="Download(this)">Download</span>  <span onclick="Rename(this)">Rename</span> 
  </li>
</ul>

＆＃13;

Answer 3

你可以使用jquery＆＃39; s的prev（）找到前一个元素的值，如下所示

＆＃13;

function Download(element) {
 var gettry=$(element).prev().val();
}
function Rename(element){
var gettry=$(element).prev().prev().val();
  console.log("getting "+gettry)
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
       <li >  <input type="hidden" value="file1" /> <span onclick="Download(this)">Download</span>   <span onclick="Rename(this)">Rename</span> </li>
       <li >  <input type="hidden" value="file2" /> <span onclick="Download(this)">Download</span>   <span onclick="Rename(this)">Rename</span> </li>
       <li >  <input type="hidden" value="file3" /> <span onclick="Download(this)">Download</span>   <span onclick="Rename(this)">Rename</span> </li>
   </ul>

＆＃13;

Answer 4

使用jquery和data属性是最干净的方法。

HTML：

  <ul>
    <li data-download="somefile1.txt">
      <button class="download_link">Download</button> | <button class="rename">Rename</button>
    </li>

    <li data-download="somefile2.txt">
      <button class="download_link">Download</button> | <button class="rename">Rename</button>
    </li>

    <li data-download="somefile3.txt">
      <button class="download_link">Download</button> | <button class="rename">Rename</button>
    </li>
  </ul>

JS：

$(document).ready(function(){
  $('.download_link').click(function(){
    filename = $(this).parent().data('download');
    alert(filename);
  });
});

https://jsfiddle.net/p2wo1b5k/

Answer 5

让您的事件以内联方式绑定是不好的。最佳做法是保持代码分离和清洁。我建议使用Jquery .on()将事件绑定到您的元素。这将使您的维护变得简单。

A article on why inline Javascript is bad

绑定click事件后，$(this)将指向触发事件的元素。现在使用siblings()获取相应input元素的值。

＆＃13;

$(function(){    // short hand for $(document).ready(function(){
  $('span').on('click',function(){
    var fileName = $(this).siblings('input').val();
    alert(fileName);
  });
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <input type="hidden" value="file1" /> <span>Download</span>  <span>Rename</span>
  </li>
  <li>
    <input type="hidden" value="file2" /> <span>Download</span>  <span>Rename</span>
  </li>
  <li>
    <input type="hidden" value="file3" /> <span>Download</span>  <span>Rename</span>
  </li>
</ul>

＆＃13;

编辑其他（可选）我建议的一些改变是

使用data-* atrributes保存以后必须在jquery中使用的所有信息。
将每个范围的功能添加到其data属性中，以便我们可以在下载和重命名之间切换逻辑。

＆＃13;

$(function(){
  $('span').on('click',function(){
    var fileName = $(this).closest('li').data('filename');
    debugger;
    var functionType = $(this).data('function');
    
    alert('I need to "'+functionType + '" the file '+ fileName);
    // have a if else to toggle your logic.
  });
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li data-filename="file1">
    <span data-function="download">Download</span> 
    <span data-function="rename">Rename</span>
  </li>
  <li data-filename="file2">
    <span data-function="download">Download</span> 
    <span data-function="rename">Rename</span>
  </li>
  <li data-filename="file3">
    <span data-function="download">Download</span>
    <span data-function="rename">Rename</span>
  </li>
</ul>

＆＃13;

Answer 6

您还可以找到隐藏的价值，如下面的代码段。我希望这段代码可以帮到你。

＆＃13;

rails _4.2.5.1_ new my_new_app

＆＃13;

$(document).on('click', 'li span', function(){
	var getText = $(this).text();
	var getHiddenValue = $(this).parent().find('input').val();
	alert(getText+' : '+getHiddenValue);
});

＆＃13;

如何用jQuery获取隐藏在li中的值？

6 个答案: