Question

希望我能解释清楚:)

当选择2张图像时，我希望显示不同的图像，例如有6种菜肴选择和4种食物选择。用户将选择图片和食物项目，并根据他们选择的图片与盘子和食物将显示。

我进行了搜索和搜索。我在想的是两个有一些javascript，说当选择两个输入（图像）显示图像。例如输入：RED PLATE +输入：CHICKEN =带有鸡的红色平板。

<div class="mixMatch">
  <div id="result">result image goes here</div>
    <table>
                   
  <tr>
    <td id="plates">
    <div id='p1'><img src="../images/chapter7/Frame1_Clear.jpg"/></div>
    <div id='p2'><img src="../images/chapter7/Frames3_Clear.jpg"/></div>         
    <div id='p3'><img src="../images/chapter7/Frames4_Clear.jpg"/></div>
    <div id='p4'><img src="../images/chapter7/Frames8_Clear.jpg"/></div>
    </td>
    <td id="foods">
      <div id='f1'><img src="../images/chapter7/brownLenses.png"/></div>
      <div id='f2'><img src="../images/chapter7/greenLenses.png"/></div>
      <div id='f3'><img src="../images/chapter7/greyLenses.png"/></div>
      <div id='f4'><img src="../images/chapter7/emeraldLenses.png"/></div>
      <div id='f5'><img src="../images/chapter7/amethystLenses.png"/></div>
      <div id='f4'><img src="../images/chapter7/sapphireLenses.png"/></div>
      <div id='f4'><img src="../images/chapter7/amethystLenses.png"/></div>
     </td>
     </tr>
   </table>
 </div>

我把我到目前为止所做的实际代码放到了一边。因此，当选择Frame1和brownLens时，它会显示一个名为“Frame1BrownLens.jpg”的图像。关于如何解决这个问题的任何帮助？

Answer 1

这样的事吗？（显然是图像而不是文字）

（点击“运行代码段”进行播放）

＆＃13;

New-Item -ItemType SymbolicLink -Path C:\SPI -Target "C:\Users\Chino\Dropbox (Reserve Membership)\SPI" -Force

＆＃13;

$('#plates div').click(function(){
  $(this).parent().children().removeClass('selected');
  $(this).addClass('selected');
  $('#result').text('Please select food');
});
$('#foods div').click(function(){
  let plate = $('#plates .selected').text();
  let food = $(this).text();
  $('#result').text('We have '+food+' in '+plate);
});

＆＃13;

单击两个图像以显示另一个图像

1 个答案: