Question

我是一名JavaScript新手，我在使代码工作时遇到了一些困难。我已经设置了一个函数，该函数根据元素类和ID引入变量并在onclick上执行它。

<div id="holder">
    <img id="wallImg" src="/testpath/selwall/nopaint.jpg">
</div>

<div id="options">
    <ul id="selWall">
        <li class="bluepaint" onclick="printStuff()"><strong>Blue</strong></li>
        <li class="redpaint" onclick="printStuff()"><strong>Red</strong></li>
        <li class="greenpaint" onclick="printStuff()"><strong>Green</strong></li>
    </ul>
</div>

<script type="text/javascript">

    function printStuff() {

        var imgCategory = srcElement.parentNode;
        var imgClass = srcElement.className;

        document.getElementById("wallImg").src="http://testurl.co.uk/media/gbu0/" + imgCategory + ImgClass + ".png";

    }

</script>

用户应该能够从一系列样本中选择他们的颜色（ul＃selWall li元素），JS将更改页面上特定图像ID的来源（在这种情况下，img＃ wallImg）带有点击元素的类并单击元素的父元素ID。

最终我希望能够扩展此脚本以使用ul id作为URL参数名称和绘制类型（即testurl.com/paint-selection&selWall=bluepaint&selDoor=greenpaint。）据我所知，JQuery无法附加URL，因此我和＃39;而是坚持使用纯JavaScript。

Answer 1

对您的脚本进行了一些更改，以使脚本工作并获取当前元素的父ID和类。

function printStuff(srcElement) {
        var imgCategory = srcElement.parentNode;
        var imgClass = srcElement.className;

        document.getElementById("wallImg").src="http://testurl.co.uk/media/gbu0/" + imgCategory.getAttribute('id') + imgClass + ".png";
  
  alert(document.getElementById("wallImg").src);
  
  
  var url = 'testurl.com/paint-selection&selWall='+imgClass+'&selDoor='+ imgCategory.getAttribute('id');
  
  alert(url);

    }

<div id="holder">
    <img id="wallImg" src="/testpath/selwall/nopaint.jpg">
</div>

<div id="options">
    <ul id="selWall">
        <li class="bluepaint" onclick="printStuff(this)"><strong>Blue</strong></li>
        <li class="redpaint" onclick="printStuff(this)"><strong>Red</strong></li>
        <li class="greenpaint" onclick="printStuff(this)"><strong>Green</strong></li>
    </ul>
</div>

Answer 2

你说你想坚持使用javascript，因为你不认为jQuery可以附加URL。这并不是完全忽略它的真正原因。 JQuery是javascript，它只是一个库。这意味着您可以随时使用vanilla javascript，例如，当您想要更改URL时。

现在可以获得所需的功能。您可以在内联点击事件registrator（即this）中使用关键字onclick="printstuff()"。传递this变量将允许您使用单击处理程序中的单击元素。因此，将onclick="printStuff()"更改为onclick="printStuff(this)"。现在在你的函数中你可以使用它来代替srcElement，并且有意义。

或者安装使用世界其他地方的杰瑞

$(document).ready(function(event){
     $("#selwall).children("li").on("click", function(event) {
          event.preventDefault();
          var category = "sellwall"; //probably want to store this into a data-category arrtibute somewhere (maybe in the id=sellwall ul)

          var imgClass = $(this).attr('class'); //preferably use data-img_id or something too (i.e. dont use classes and id's to store data you need somewhere else).
          $("#wallImg").attr('src', <url> with imgClass and category>);
     });
})

所以我建议使用jQuery（因为你也是一个javascript新手，不学习坏东西，只是学习如何正确编程）并使用数据属性范例，在互联网上查找。用它来存储你想要使用的URL部分。

将点击的元素类和父级的ID插入另一个图像

2 个答案:

或者安装使用世界其他地方的杰瑞