草庐IT

javascript - 将图像与链接集成

coder 2023-10-13 原文

好吧，我认为用下图解释我的问题可能更容易:

从图片中可以看出，如果用户选择“按标题”，将出现一个文本框，用户可以在其中输入电影标题(我还为此文本框使用了 jQuery 自动完成功能)。然后，如果用户单击“此标题的电影”按钮，将显示一个新窗口，其中包含文本框中包含该术语的电影列表。

我的问题:

我想在它们旁边集成每部电影的小图像(也许还有一些其他信息，如电影年份、流派..)就像亚马逊所做的那样(Please see here)。我将 renderitem 用于自动完成部分，它工作正常，但实际上我不知道如何在新窗口中做同样的事情。如果有人能帮助我，我将不胜感激。

这是我的代码:

<div id="m_scents" class="field">
   <label style="margin-bottom:10px;" for="m_scnts"></label>
   <input class="autofill4" type="textbox" name= "q27[]" id="q" placeholder="Enter movie titles here" />
   <input type="button" value="Movies by this title" id="btnMove" style="display:none;"/> 
</div>

<script type="text/javascript">
var selected;
$(document).ready(function () {
    $("input[id='selectType']").change(function(){
         if ($(this).val() == "byTitle") {
              $("#m_scents2").hide();
              $("#btnMove").show();
              $("#m_scents").show();
              $("#q").focus();
              $("#q").autocomplete({
                   minLength: 0,
                   delay:5,
                   source: "query.php",
                   focus: function( event, ui ){
                             event.preventDefault();
                             return false;
                        },
                    select: function( event, ui ) {
                             window.selected = ui.item.movieName;
                             return false;
                        }
              }).data("uiAutocomplete")._renderItem = function( ul, item ) {
                return $("<li></li>")
                    .data( "item.autocomplete", item )
                    .append( "<a>" + (item.posterLink?"<img class='imdbImage' src='imdbImage.php?url=" + item.posterLink + "' />":"") + "<span class='imdbTitle'>" + item.movieName + "</span>" + "<div class='clear'></div></a>" )
                    .appendTo( ul );
                };
        }
  });

$('#btnMove').on('click', function (e) {
      popupCenter("movieBytitle.php","_blank","400","400");
});
</script>

这是 movieBytitle.php:

<body>
<div id= "field"
</div>
 <script type="text/javascript">
  var selected = parent.window.opener.selected; 
 $.ajax({
   url: 'childfilm.php',
   datatype: "json",
   data:{p:selected},
   success: function(response) {     
         $("#field").html(response);
     }
  });
</script>
</body>

这是 childfilm.php:

<?php
 if(isset($_GET['p']) && !empty($_GET['p'])){
  try{ 
    include('imdbConnection.php');
    $sql = $conn->prepare("SELECT DISTINCT movieName FROM films WHERE movieName LIKE :p");
    $sql->execute(array(':p' => '%'.$_GET['p'].'%'));

    while($row = $sql->fetch(PDO::FETCH_ASSOC)){
       $option = '<a href=movie.php?title="' . $row['movieName'] . '">' . $row['movieName'] . '</a><br />';
       $html .= $option;

       }

    } catch(PDOException $e){
           echo 'ERROR: ' . $e->getMessage();
       }
   echo $html; 
   exit;
 }
?>

更新:

这是新的 childfilm.php(感谢@ghost 的帮助):

if(isset($_GET['p']) && !empty($_GET['p'])){
    include('imdbConnection.php');
    $sql = $conn->prepare("SELECT DISTINCT movieName FROM films WHERE movieName LIKE :p");
    $sql->execute(array(':p' => '%'.$_GET['p'].'%'));
}
?>

<table>
    <tr>
        <th></th>
        <th>Title</th>
        <th>Year</th>
        <th>Genre</th>
    </tr>
    <?php while($row = $sql->fetch(PDO::FETCH_ASSOC)): ?>
    <tr>
        <td><img class='imdbImage' src='imdbImage.php?url="<?php echo $row['posterLink'];?>'</td>
        <td><a href="movie.php?title=<?php echo urlencode($row['movieName']); ?>"><?php echo $row['movieName']; ?></a></td>

    </tr>
    <?php endwhile; ?>
</table>

这是 imdbImage.php:

<?php
header("Content-type: image/jpeg");
$url = rawurldecode($_REQUEST['url']);
echo file_get_contents($url);
?>

新问题:

这是结果(仍然，图像显示不正确):

最佳答案

如果您已经在表格中获得了这些信息，那么只需将其包含在抓取中并以表格形式呈现即可:

<?php
if(isset($_GET['p']) && !empty($_GET['p'])){

    include('imdbConnection.php');

    $sql = $conn->prepare("SELECT DISTINCT movieName FROM films WHERE movieName LIKE :p");
    $sql->execute(array(':p' => '%'.$_GET['p'].'%'));

}

?>

<table>
    <tr>
        <th></th>
        <th>Title</th>
        <th>Year</th>
        <th>Genre</th>
    </tr>
    <?php while($row = $sql->fetch(PDO::FETCH_ASSOC)): ?>
    <tr>
        <td><img src="path/to/images/<?php echo $row['filename']; ?>" alt="" /></td>
        <td><a href="movie.php?title=<?php echo urlencode($row['movieName']); ?>"><?php echo $row['movieName']; ?></a></td>
        <td><?php echo $row['year']; ?></td>
        <td><?php echo $row['genre']; ?></td>
    </tr>
    <?php endwhile; ?>
</table>

关于javascript - 将图像与链接集成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26887128/

javascript将34gt39phpjqueryhtmlmysql

有关javascript - 将图像与链接集成的更多相关文章

  1. ruby-on-rails - 如何使辅助方法在 Rails 集成测试中可用？ - 2

    我在app/helpers/sessions_helper.rb中有一个帮助程序文件，其中包含一个方法my_preference，它返回当前登录用户的首选项。我想在集成测试中访问该方法。例如，这样我就可以在测试中使用getuser_path(my_preference)。在其他帖子中，我读到这可以通过在测试文件中包含requiresessions_helper来实现，但我仍然收到错误NameError:undefinedlocalvariableormethod'my_preference'.我做错了什么？require'test_helper'require'sessions_hel

  2. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  3. ruby-on-rails - 我如何将 Hoptoad 与 DelayedJob 和 DaemonSpawn 集成？ - 2

    我一直很高兴地使用DelayedJob习惯用法:foo.send_later(:bar)这会调用DelayedJob进程中对象foo的方法bar。我一直在使用DaemonSpawn在我的服务器上启动DelayedJob进程。但是...如果foo抛出异常，Hoptoad不会捕获它。这是任何这些包中的错误...还是我需要更改某些配置...或者我是否需要在DS或DJ中插入一些异常处理来调用Hoptoad通知程序？回应下面的第一条评论。classDelayedJobWorker 最佳答案 尝试monkeypatchingDelayed::W

  4. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？ 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

  5. ruby-on-rails - Prawn - 表格单元格内的链接 - 2

    我正在尝试用Prawn生成PDF。在我的PDF模板中，我有带单元格的表格。在其中一个单元格中，我有一个电子邮件地址:cell_email=pdf.make_cell(:content=>booking.user_email,:border_width=>0)我想让电子邮件链接到“mailto”链接。我知道我可以这样链接:pdf.formatted_text([{:text=>booking.user_email,:link=>"mailto:#{booking.user_email}"}])但是将这两行组合起来(将格式化文本作为内容)不起作用:cell_email=pdf.make_c

  6. jenkins部署1--jenkins+gitee持续集成 - 2

    前置步骤我们都操作完了，这篇开始介绍jenkins的集成。话不多说，看操作1、登录进入jenkins后会让你选择安装插件，选择第一个默认的就行。安装完成后设置账号密码，重新登录。2、配置JDK和Git都需要执行路径，所以需要先把执行路径找到，先进入服务器的docker容器，2.1JDK的路径root@69eef9ee86cf:/usr/bin#echo$JAVA_HOME/usr/local/openjdk-82.2Git的路径root@69eef9ee86cf:/#whichgit/usr/bin/git3、先配置JDK和Git。点击：ManageJenkins>>GlobalToolCon

  7. ruby-on-rails - 在 Ruby (on Rails) 中使用 imgur API 获取图像 - 2

    我正在尝试使用Ruby2.0.0和Rails4.0.0提供的API从imgur中提取图像。我已尝试按照Ruby2.0.0文档中列出的各种方式构建http请求，但均无济于事。代码如下:require'net/http'require'net/https'defimgurheaders={"Authorization"=>"Client-ID"+my_client_id}path="/3/gallery/image/#{img_id}.json"uri=URI("https://api.imgur.com"+path)request,data=Net::HTTP::Get.new(path

  8. python ffmpeg 使用 pyav 转换 一组图像 到 视频 - 2

    2022/8/4更新支持加入水印水印必须包含透明图像，并且水印图像大小要等于原图像的大小pythonconvert_image_to_video.py-f30-mwatermark.pngim_dirout.mkv2022/6/21更新让命令行参数更加易用新的命令行使用方法pythonconvert_image_to_video.py-f30im_dirout.mkvFFMPEG命令行转换一组JPG图像到视频时，是将这组图像视为MJPG流。我需要转换一组PNG图像到视频，FFMPEG就不认了。pyav内置了ffmpeg库，不需要系统带有ffmpeg工具因此我使用ffmpeg的python包装p

  9. ruby - 是否有将图像文件转换为 ASCII 艺术的命令行程序或库？ - 2

    有这样的事吗？我想在Ruby程序中使用它。 最佳答案 试试这个http://csl.sublevel3.org/jp2a/此外，Imagemagick可能还有一些东西 关于ruby-是否有将图像文件转换为ASCII艺术的命令行程序或库？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/6510445/

  10. ruby-on-rails - 使用 Dragonfly 从 URL 分配图像 - 2

    我正在使用Dragonfly在Rails3.1应用程序上处理图像。我正在努力通过url将图像分配给模型。我有一个很好的表格:{:multipart=>true}do|f|%>RemovePicture?Dragonfly的文档指出:Dragonfly提供了一个直接从url分配的访问器:@album.cover_image_url='http://some.url/file.jpg'但是当我在控制台中尝试时:=>#ruby-1.9.2-p290>picture.image_url="http://i.imgur.com/QQiMz.jpg"=>"http://i.imgur.com/QQ

随机推荐