JavaScript/jQuery:如果。。。否则在另一个中打印-我做错了什么？_Javascript_Jquery_Html

JavaScript/jQuery:如果。。。否则在另一个中打印-我做错了什么？

javascript jquery html

JavaScript/jQuery:如果。。。否则在另一个中打印-我做错了什么？,javascript,jquery,html,Javascript,Jquery,Html,编辑：当我第一次单击按钮时，无论选择哪个选项，文本都会打印在左列。当我再次单击按钮时，文本将再次打印在右栏中，与选择无关。我真的不明白我正在尝试将表单中的输入打印到div中。这是需要修改的源HTML。它适用于大学课堂： <body> <div class="main"> <h2> Exercise</h2> <div class="content"> <input type=

编辑：当我第一次单击按钮时，无论选择哪个选项，文本都会打印在左列。当我再次单击按钮时，文本将再次打印在右栏中，与选择无关。我真的不明白

我正在尝试将表单中的输入打印到div中。这是需要修改的源HTML。它适用于大学课堂：

 <body>
    <div class="main">
    <h2> Exercise</h2>
        <div class="content">
          <input type="text" class="input">


          <button class="button">Print</button>

          <select>
            <option>Choose left or right</option>
            <option value="left">Left column</option>
            <option value="right">Right column</option>
          </select>

        </div>

        <h4>Output</h4>

        <div id="output"> 

        </div>

        <div class="left">

        </div>
        <div class="right">

        </div>
    </div>

抱歉，如果这是非常基本的-我对JS和jQuery完全陌生。

你的JS没有问题，只需要做一些基本的样式

jQuerydocument.readyfunction{ $'.button'。单击函数{ $'.input'.val；如果$'select'.val==左{ $'div.left'.html$'.input'.val； } 否则{ $'div.right'.html$'.input'.val； } }; }; h3{字体系列：helvetica；} 正文{背景色：ededed；} .main{页边距：自动；页边距顶部：100px；字体系列：helvetica；最大宽度：900px；} .content{背景色：白色；填充：40px；} 页脚{文本对齐：居中；} 输出{背景色：F2F5F1；} .左，.右{ 浮动：左；宽度：40%； } 打印左列右栏

为选择标记指定一个名称

<select name="selector">

$('select[name=selector]').val() === "left" )

HTML

在positionChange上，首先清除以前应用的类text left或text right，并根据下拉值添加类，然后更改元素上的当前html

const positionChange = () => {
    $(".printValue")
        .removeClass("text-left")
        .removeClass("text-right");
    $(".printValue")
        .addClass("text-"+$("#columnChange").val())
        .html($(".input").val());
};

两个处理程序绑定在下拉列表值的更改上，并单击按钮，一旦这些事件触发，将调用positionChange函数

$("#columnChange").on("change", () => {
     positionChange();
});

$(".button").on("click", () => {
    positionChange();
});

你的代码运行良好。但是出于查看的目的，您没有看到以适当的方式发生的更改。背后的原因是浮动元素没有在新行中启动。您可以通过多种方式解决此问题

如果您准备好修改HTML，那么您可以使用下面的解决方案。在一个div中添加float元素，如下所示

<input type="text" class="input">
<button class="button">Print</button>
<select>
    <option value="left">Left column</option>
    <option value="right">Right column</option>
</select>
<div>
  <div class="left"></div>
  <div class="right"></div>
</div>

h3{字体系列：helvetica；} 正文{背景色：ededed；} .main{页边距：自动；页边距顶部：100px；字体系列：helvetica；最大宽度：900px；} .content{背景色：白色；填充：40px；} 页脚{文本对齐：居中；} 输出{背景色：F2F5F1；} .左，.右{ 浮动：左；宽度：40%； } 打印左列右栏

可能尝试在左、右div中添加一些填充和边框，并尝试每次重置html内容。但无论选择什么，它都只打印到左侧。你怎么知道它总是打印在左边。你有这个的css吗？简单地分配左类和右类不会自动对齐。你必须为此写风格。如果有，请共享您的css。是的，HTML文件中包含css，但我应该只能通过添加JavaScript/jQuery而不更改HTML/css来获得结果。@Laura_Laurent这很好。我们只是想知道css中有什么。如果它不是从css应用的，那么我们只能通过javascript应用样式。谢谢你的帮助！请添加一个解释，说明它是如何工作的，以及如何解决OP问题。因此，我在输入字段中有bind事件，在选择下拉列表中有change事件，因此，任何调用positionChange函数的事件触发器，该函数首先清除先前添加的类，例如：text left或text right，然后根据选择的下拉值添加类，并将值放入输入框CSS的html中，都是由教授提供的。抱歉，我没有在原始帖子中包含。指令是既不修改HTML也不修改CSS，而是添加JS/jQuery以实现结果。但仍然-当我在表单中输入文本时，选择右键并单击按钮，文本显示在左侧。我可以看看给定的css吗？这可能是你解决问题的关键。我现在没有访问该文件的权限，但稍后再与你联系。非常感谢你！我将css添加到OP中。我真的不明白-无论我尝试什么，它总是打印到左侧。非常感谢您的详细解释。由于某些原因，它仍然没有按预期工作我在OP中添加了一些附加信息。更新了我的答案。检查“编辑零件”中的更新。

.text-left{ text-align:left; }
.text-right{ text-align:right; }

const positionChange = () => {
    $(".printValue")
        .removeClass("text-left")
        .removeClass("text-right");
    $(".printValue")
        .addClass("text-"+$("#columnChange").val())
        .html($(".input").val());
};

$("#columnChange").on("change", () => {
     positionChange();
});

$(".button").on("click", () => {
    positionChange();
});

<input type="text" class="input">
<button class="button">Print</button>
<select>
    <option value="left">Left column</option>
    <option value="right">Right column</option>
</select>
<div>
  <div class="left"></div>
  <div class="right"></div>
</div>