Question

我想创建一个简单的网页，用户可以通过在日期选择器中选择日期来选择图片。图片文件名包含日期字符串。例如：img-2018-06-24.png。到目前为止，我可以通过以下日期选择器示例开始工作：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" 
href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();

//selecting the button and adding a click event
$("#alert").click(function() {
//alerting the value inside the textbox
var date = $("#datepicker").datepicker("getDate");
alert($.datepicker.formatDate("dd-mm-yy", date));
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
<p>Alert the value: <button id="alert">Alert!</button>

</body>
</html>

在单击按钮后弹出所选日期。相反，我想根据选择的日期放一张照片。因此，我需要以某种方式将日期传递到文件名字符串并在：

中使用它

<img src= filename alt="myimage">

但是，到目前为止没有运气...

Answer 1

以下代码是否有效？

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" 
href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();

//selecting the button and adding a click event
$("#alert").click(function() {
    //alerting the value inside the textbox
    var date = $("#datepicker").datepicker("getDate");
        if(date) {
            var imgSrc = 'img-' + $.datepicker.formatDate("dd-mm-yy", date) + '.png';
            $('#show-image').show().attr('src', imgSrc);
        }
    });
});
</script>
</head>
<body>

<img src='' alt="myimage" id="show-image" style="display:none;">

<p>Date: <input type="text" id="datepicker"></p>
<p>Alert the value: <button id="alert">Alert!</button>

</body>
</html>

Answer 2

这是如何在图像上添加src

<!doctype html> 
<html lang="en"> 
<head>
 <meta charset="utf-8">
 <title>jQuery UI Datepicker - Default functionality</title>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
 <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
 <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 <link rel="stylesheet" href="/resources/demos/style.css">
 <script> 
$(function() {
$( "#datepicker" ).datepicker(); //selecting the button and adding a click event 
$("#alert").click(function() { //alerting the value inside the textbox
 var date = $("#datepicker").datepicker("getDate");

 alert($.datepicker.formatDate("dd-mm-yy", date));

var src= $.datepicker.formatDate("dd-mm-yy", date);
$("#image").attr("src",src+".jpg").show();

});
 }); 
</script> </head> <body> 
<img id="img" src="" style="display:none;">
<p>Date: <input type="text" id="datepicker"></p> <p>Alert the value: <button id="alert">Alert!</button> </body> </html>

Answer 3

您需要像这样在点击事件中设置__invert__的{{1}}属性-

src

如果您还想更改alt属性，可以用相同的方法-

img

查看有效的Fiddle

通过选择日期选择器中的日期来选择图片

3 个答案: