Question

很简单，如果我有两个可供选择的照片，还有一个文本框和选择器。我想要一个输出显示我点击的图片，文本框中输入的内容以及我选择的选项。例如：

JSFiddle - https://jsfiddle.net/vdqz2esz/2/

<!--STYLE-->
    <img src="Images/casual3.jpg">
        <a class="btn btn-primary btn-lg" href="#div2" role="button" value="casual" id="casual">Casual &raquo;</a>

    <img src="Images/Street2.jpg">
        <a class="btn btn-primary btn-lg" href="#div2" role="button" value="street" id="street">Street &raquo;</a>

<!--height-->
    <form>
                  Height:<br>
                  <input type="text" name="height" id="height"><br>
    </form>

<!--shirt size-->
    <select>
                      <option value="small" id="small">Small</option>
                      <option value="medium" id="medium">Medium</option>
                      <option value="large" id="large">Large</option>
                      <option value="xlarge" id="xlarge">X-Large</option>
                      <option value="xxlarge" id="xxlarge">XX-Large</option>
    </select> 
<a class="btn btn-primary btn-lg" href="#" role="button">Submit &raquo;</a>
<!--output here-->
<p id="style1">Style:</p>
<p id="height1">Height:</p>
<p id="shoes1">Shoes:</p>

使用Jquery，我将如何做到这一点？

正在尝试这样的东西，但没有工作。我在这里抓住稻草......

$('#height1').html("#height");

像往常一样谢谢。

Answer 1

代码中缺少很多东西。

小提琴中没有Jquery引用只是开头

尝试使用此Updated Fiddle作为解决方案

首先在输出<span>代码中添加一些<p>

<!--output here-->
<p id="style1">Style:<span></span></p>
<p id="height1">Height:<span></span></p>
<p id="shoes1">Shoes:<span></span></p>

您的JQuery代码应该看起来像

$('.submit').click(function(){
  $('#height1 span').text($('select option:selected').val());
  $('#shoes1 span').text($('#height').val());
});

Answer 2

请参阅下面的代码段，其中显示了如何显示输入字段的值并选择框。然而，这种方法不适用于图像，因为它们不是表单元素。有关如何使图像的行为类似于单选按钮，您可以看到this question on SO。

＆＃13;

$('.submit').click(function() {
  $('#height1').html($('input#height').val())
  $('#shoes1').html($('select').val())
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--STYLE-->
<img src="Images/casual3.jpg">
<a class="btn btn-primary btn-lg" href="#div2" role="button" value="casual" id="casual">Casual &raquo;</a>

<img src="Images/Street2.jpg">
<a class="btn btn-primary btn-lg" href="#div2" role="button" value="street" id="street">Street &raquo;</a>

<!--height-->
<form>
  Height:
  <br>
  <input type="text" name="height" id="height">
  <br>
</form>

<!--shirt size-->
<select>
  <option value="small" id="small">Small</option>
  <option value="medium" id="medium">Medium</option>
  <option value="large" id="large">Large</option>
  <option value="xlarge" id="xlarge">X-Large</option>
  <option value="xxlarge" id="xxlarge">XX-Large</option>
</select>
<a class="btn btn-primary btn-lg submit" href="#" role="button">Submit &raquo;</a>
<!--output here-->
<p id="style1">Style:</p>
<p>Height: <span id="height1"></span></p>
<p>Shoes: <span id="shoes1"></span></p>

＆＃13;

另外，我建议稍微改进HTML的结构。 input和select等所有表单元素都应该是form标记的子元素。

如何将选定的链接/文本输入发布为输出答案

2 个答案: