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

无法在HTML onClick函数中传递参数

1 个答案: