我可以使用另一个onclick在一个元素中更改属性值吗？

Question

我有一个多个缩略图的网页，都是并排放置的。单击图像时，弹出一个模态窗口，显示图像的更大版本和关闭按钮。我希望窗口在单击其中一个图像“按钮”时更改其图像src。因此，我尝试在span元素中放置一个名为"imgsrc“的属性，这些元素都在div的class=”坟场转储“下。

HTML

\\\button that looks like a thumbnail of "image 04"\\\
<button button="click"
        class="graveyard-btn graveyard-primary"
        data-toggle="modal"
        data-target="#exampleModal"
        imgsrc="http://example.com/wp-content/uploads/04.png">
        <img src= "http://example.com/wp-content/uploads/04.png">
    </button>

\\\Image of modal set to "image 22" as default\\\
 <div class="modal-body">
        <img class="modal-image" 
             src="http://example.com/wp-content/uploads/22.png"
             alt="Click on button" />

非工作jQuery

\\\On Click change the modal image src attribute to the value at imgsrc of the thumbnail element clicked\\\
$('.graveyard-dump span').ready(function click(f) {
       $('.graveyard-dump span').click(function click(f) {
            $('.modal-image').attr('src', $(this).attr("imgsrc"));
    });
});

我有了从另一个程序中重用代码的想法，该程序在单击时更改了一系列css元素和文本。以下是我从HTML中窃取的一些代码

///Red button with many attribute values for the jQuery to read and place///
 <span   class="redbtn1" 
                    picChange="url(http://example.com/wp-content/uploads/Resin-Red.png)" 
                    name="Red" 
                    color="#ff0000" 
                    background1="#ff2400"  
                    background2="#ba110c"  
                    background3="#90021F"  
                    background4="none"
                    name1="Scarlet"
                    name2="Crimson"
                    name3="Burgundy"
                    name4="-"
                    ></span>

jQuery

///Reads a click, adds the class "active" and removes it from other buttons, changes many attributes around the page. None of these are attribute-attribute changes though./// 
$('.changecolor span').ready(function click(f) {
        $('.changecolor span').click(function click(f) {
            $('.changecolor span').removeClass("active");
            $(this).addClass("active");
            $('.pic').css('background-image', $(this).attr("picChange"));
            $('.name').text($(this).attr("name"));
            $('.name').css('color', $(this).attr("color"));
            $('.colorbar-1').css('background', $(this).attr('background1'));
            $('.colorbar-2').css('background', $(this).attr('background2'));
            $('.colorbar-3').css('background', $(this).attr('background3'));
            $('.colorbar-4').css('background', $(this).attr('background4'));
            $('.colorbar-1').text($(this).attr("name1"));
            $('.colorbar-2').text($(this).attr("name2"));
            $('.colorbar-3').text($(this).attr("name3"));
            $('.colorbar-4').text($(this).attr("name4"));

Answer 1

您可以像这样实现图像源的更改

<img id="display" src=""/>

<button onclick="$('display').src='https://imageLink.com'">Click me</button>

Answer 2

解决办法是用

<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("#modal-image").attr("src", $(this).attr("imgsrc"));
  });
});
</script>

我将'.modal-image‘src属性设置为单击按钮的属性"imgsrc“。我还必须删除位于. src中的启动映像，否则它将尝试在第一次单击时加载该映像。