無法在HTML onClick函數中傳遞參數

Question

我和我的隊友遇到了一個我們無法解決的問題，希望有人可以幫助我們。

我們在頂部有4張圖片，我們想在單擊它們時更改另一個div的內容。

這是JavaScript函數的代碼，該函數放置了4張上面的圖像，並且效果很好。 當我們嘗試將參數從onClick（）函數傳遞到我們的modificarDetailed（）時，就會出現問題。 （向右滾動可查看img的最重要部分）

function insertRecommended(parent,events) {
    var hola = events[0].author;
    parent.append('<div class="row">\
            ...
        <div class="col-md-3 col-sm-6">\
                <img class="img-responsive img-portfolio img-hover" src="'+ events[1].image+'" alt="" onclick="modificarDetailed('+events[1].nameEvent+','+events[1].category+','+events[1].author+','+events[1].dateInit+','+events[1].image+');">\
        </div>\
        ...
    </div>')
}

這是增加了一個DetailedEvent的HTML代碼的功能。 如您所見，我們嘗試使其動態並更改輸入內容

function insertDetailedEvent(parent,event) {

    parent.append('<!-- Features Section -->\
        <div class="row" > \
            <form id="' + "detailedform" + '">\
            <div class="col-lg-12">\
                <h2 class="page-header"><input type="text" name="eventname" value="'+event.eventName+'"/></h2>\
            </div>\
           <div class="col-md-6">\
                <ul>\
                    <li><strong>Categoría: </strong><input type="text" name="category" value="'+event.category+'"/></li>\
                    <li><strong>Creador: </strong><input type="text" name="author" value="'+event.author+'"/></li>\
                    <li><strong>Fecha de Inicio: </strong><input type="text" name="dateInit" value="'+event.dateInit+'"/></li>\
                </ul>\
                <p>'+event.description+'</p>\
                </form>\
            </div>\
            <div class="col-md-4 .col-md-offset-4">\
                <img name="eventImage" class="img-responsive" src="'+event.image+'" alt="">\
            </div>\
        </div>\
        <!-- /.row -->')

}

之后，我們可以用它來更新DetailedEvent的內容

function init(parent){

    listEvent("logon",function(events){

        insertRecommended(parent,events);
        insertDetailedEvent(parent,events[0]);

    },function(){},function(){});
}

function modificarDetailed(eventName,category,author,dateInit,image){
    var documento= $("#detailedform");
    documento.find('input[name="eventname"]').val(eventName);
    documento.find('input[name="category"]').val(category);
    documento.find('input[name="author"]').val(author);
    documento.find('input[name="dateInit"]').val(dateInit);
    //documento.find('img[name="eventImage"]').src(image);

}

這就是我們在html主文檔中調用init的方式

<script type="text/javascript">
        $(document).ready(function() {
            init($('#Content'));

        });
</script>

提前致謝。

Answer 1

最后，我們找到了解決方案。 我們昨天看到它在網上搜索，但我們做錯了，因此一開始它不起作用。

必須使用'\\' ，所以它是這樣的：

<img class="img-responsive img-portfolio img-hover" src="'+ events[1].image+'" alt="" onclick="modificarDetailed('+events[1].nameEvent+','+events[1].category+','+events[1].author+','+events[1].dateInit+','+events[1].image+');">\

這是必須完成的工作：

<img class="img-responsive img-portfolio img-hover" src="'+ events[1].image+'" alt="" onclick="modificarDetailed(\''+events[1].nameEvent+'\',\''+events[1].category+'\',\''+events[1].author+'\',\''+events[1].dateInit+'\',\''+events[1].image+'\',\''+events[1].description+'\');">

無論如何，感謝@Barmar和@ yak613的嘗試。