无法在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的尝试。