兩個腳本不能一起工作

Question

我正在學習在jQuery中編寫一些腳本，我有兩個問題：其中一個不與另一個一起工作，而單獨時它工作得很好。 由於我不是Javascript專家，也不是編程基礎知識（對不起），我不知道腳本之間是否存在某種沖突。

所以我求你幫助我，因為我現在很絕望。

這是兩個腳本都是的頁面： http ： //www.ufv.es/beli （只需滾動直到看到一些藍色按鈕）。

第一個腳本根據您單擊的按鈕在頁面右側加載不同的內容。

第二個應該在“Claustro docente”按鈕內工作，正如它在我創建的另一個頁面上工作，以向您展示： http ：//www.ufv.es/beli2

我確定我犯了很多錯誤，但如果你能幫我的話......謝謝！

 $(document).ready(function() { jQuery('.grados-content').hide(); jQuery('#grados-contenido').html(jQuery('#grados-content1').html()); divContenido = jQuery('.grado-item', this).children('.grados-content'); $('.grado-item',this).click(function(e){ e.preventDefault(); jQuery('#grados-contenido').html(jQuery(this).children('.grados-content').html()); $(this).addClass('grado-seleccionado'); $('.grado-item').not(this).removeClass('grado-seleccionado'); }); var curentProfe = 0; var totalProfes = $('#profes').children().length; function showBigProfe(profeDiv) { var RutaImagen = $(profeDiv).children('img').attr('src'); var titulo = $(profeDiv).find('h3').html(); var subti = $(profeDiv).find('.masinfo').html(); var profeweb = $(profeDiv).find('.webenlace').attr('href'); var profemail = $(profeDiv).find('.mailenlace').attr('href'); var linkedin = $(profeDiv).find('.linkedinenlace').attr('href'); var researchgate = $(profeDiv).find('.researchgate').attr('href'); var facebook = $(profeDiv).find('.facebookenlace').attr('href'); var twitter = $(profeDiv).find('.twitterenlace').attr('href'); $('#grande').fadeIn(); $('#conteneprof').children('img').attr('src', RutaImagen); $('.infocontenido').children('h3').html(titulo); $('.bio').html(subti); if (profeweb == '#') { $('#iconoweb').css('display', 'none'); } else { $('#iconoweb').css('display', 'inline-block'); $('.infocontenido').children('.webenlace').attr('href', profeweb); } if (profemail == '#'){ $('#iconomail').css('display', 'none'); } else{ $('#iconomail').css('display', 'inline-block'); $('.infocontenido').children('.mailenlace').attr('href', profemail); } if (linkedin == '#'){ $('.linkedinenlace').css('display', 'none'); } else { $('.linkedinenlace').css('display', 'inline-block'); $('.infocontenido').children('.linkedinenlace').attr('href', linkedin); } if (researchgate == '#'){ $('.researchgate').css('display', 'none'); } else { $('.researchgate').css('display', 'inline-block'); $('.infocontenido').children('.researchgate').attr('href', researchgate); } if (facebook == '#'){ $('.facebookenlace').css('display', 'none'); } else { $('.facebookenlace').css('display', 'inline-block'); $('.infocontenido').children('.facebookenlace').attr('href', facebook); } if (twitter == '#'){ $('.twitterenlace').css('display', 'none'); } else { $('.twitterenlace').css('display', 'inline-block'); $('.infocontenido').children('.twitterenlace').attr('href', twitter); } } $('.profe', this).mouseenter(function() { $('.infoprof', this).fadeIn(600).css('z-index', '1'); }); $('.profe', this).mouseleave(function() { $('.infoprof', this).fadeOut(600); }); $('.fa-times, #grande').click(function() { $('#grande').fadeOut(); }); $('#conteneprof').click(function(event) { event.stopPropagation(); }); $('.profe', this).click(function() { curentProfe = Number(this.id); showBigProfe(this); }); $('.fa-chevron-left').click(function() { curentProfe = curentProfe - 1; if (curentProfe < 1) { curentProfe = totalProfes; } showBigProfe('#' + curentProfe); }); $('.fa-chevron-right').click(function() { curentProfe = curentProfe + 1; if (curentProfe > totalProfes) { curentProfe = 1; } showBigProfe('#' + curentProfe); }); }); jQuery('.boton-redondo-llamamos').click(function(){ window.location.href = "http://www.ufv.es/nosotros-te-llamamos"; }); 

 #profes{ min-width:106%; } #profes .profe{ width:150px; height:130px; margin:5px; float:left; position:relative; overflow: hidden; cursor:pointer; } #profes .infoprof{ width:100%; height:90px; margin-top:20px; background:rgba(255, 255, 255, 0.75); position:absolute; display:none; } .infoprof a{ text-indent:-9999px; color:transparent; } .infoprof h3, .infoprof p{ position:absolute; color:white; } .infoprof h3{ text-align:center; text-transform:uppercase; color:#003d67; z-index:-1; width:100%; margin:0!important; } #profes .profe img.fotos{ position: absolute; min-height:130px; opacity:.8; } .profe p{ left:30%; top:50%; } .masinfo{ display:none; } #grande{ position:fixed; background-color:rgba(0,0,0,0.7); width:100%; height:100%; top:0px; left:0; display:none; z-index:10; } #conteneprof{ width:625px; display:table; padding:60px; background-color:white; margin:150px auto; opacity:1; position:relative; border-radius:10px; } #conteneprof p{ color:#575950; margin:5px; } .fa-times{ color:#003d67; text-align:center; width:24px; height:24px; position:absolute; top:15px; right:15px; font-size:22px!important; cursor:pointer; border:3px solid transparent; border-radius:30px; transition:all 0.35s linear; -webkit-transition:all 0.35s linear; padding:2px 0 2px 5px; } .fa-times:hover{ transform:rotate(90deg); -webkit-transform:rotate(90deg); border:3px solid #003d67; } .fa-chevron-left, .fa-chevron-right{ position:absolute; width:36px; height:36px; font-size:32px!important; color:#003d67; top:50%; margin-top:-18px; cursor:pointer; transition:all .3s ease; } .fa-chevron-left:hover, .fa-chevron-right:hover{ color:#6fa3b6; } .fa-chevron-left{ left:10px; } .fa-chevron-right{ right:10px; } #conteneprof img{ float:left; width:160px; margin:5px; padding:15px 0 0 45px; } #conteneprof .infocontenido{ max-width:345px; margin:0 57px 0 5px; float:left; padding:15px 0 20px 0; } #conteneprof .infocontenido h3{ color:#003d67; float:left; margin:5px; text-transform:uppercase; } #conteneprof .infocontenido p{ padding:0!important; } #conteneprof .infocontenido a.redenlace{ text-indent: -9999px; float: left; width: 27px; height: 27px; backface-visibility: hidden; box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; transform: translateZ(0px); transition-duration: 0.3s; transition-property: transform; vertical-align: middle; border-radius: 200px 200px 200px 200px; -moz-border-radius: 200px 200px 200px 200px; -webkit-border-radius: 200px 200px 200px 200px; display:none; color:transparent; margin:5px; } #conteneprof .infocontenido a.webenlace{ background: url("http://recursos.ufv.es/img/es/icono-web.png") no-repeat 0 0; } #conteneprof .infocontenido a.mailenlace{ background: url("http://recursos.ufv.es/img/es/mail-arroba.png") no-repeat 0 0; } #conteneprof .infocontenido a.linkedinenlace{ background: url("http://recursos.ufv.es/img/es/linkedin.png") no-repeat 0 0; } #conteneprof .infocontenido a.researchgate{ background: url("http://recursos.ufv.es/img/es/logo-research-gate.gif") no-repeat 0 0; } #conteneprof .infocontenido a.facebookenlace{ background: url("http://recursos.ufv.es/img/es/facebook-profes.png") no-repeat 0 0; } #conteneprof .infocontenido a.twitterenlace{ background: url("http://recursos.ufv.es/img/es/twitter.png") no-repeat 0 0; } #conteneprof .infocontenido a.redenlace:before { background: radial-gradient(ellipse at center center , rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%) repeat scroll 0 0 rgba(0, 0, 0, 0); content: ""; height: 10px; left: 5%; opacity: 0; pointer-events: none; position: absolute; top: 100%; transition-duration: 0.3s; transition-property: transform, opacity; width: 90%; z-index: -1; } #conteneprof .infocontenido a.redenlace:hover, #conteneprof .infocontenido a.redenlace:focus, #conteneprof .infocontenido a.redenlace:active { transform: translateY(-5px); border-radius: 200px 200px 200px 200px; -moz-border-radius: 200px 200px 200px 200px; -webkit-border-radius: 200px 200px 200px 200px; } #conteneprof .infocontenido a.redenlace:hover:before, #conteneprof .infocontenido a.redenlace:focus:before, #conteneprof .infocontenido a.redenlace:active:before { opacity: 1; transform: translateY(5px); } .infocontenido .bio{ max-height:200px; overflow-y:scroll; } 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Beli test</title> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /> <link rel="stylesheet" href="beli.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script> <script src="beli.js"></script> </head> <body> <div class="grados-menu"> <ul> <li class="grado-item grado-seleccionado"> <a class="enlace" href="#" id="1">Presentación</a> <div class="grados-content" id="grados-content1"> content1 </li> <li class="grado-item"> <a class="enlace" href="#" id="2">Plan de estudios</a> <div class="grados-content" id="grados-content2"> content2 </div> </li> <li class="grado-item"> <a class="enlace" href="#" id="3">Título propio: El liderazgo colaborativo en el marketing digital</a> <div class="grados-content" id="grados-content3"> content3 </div> </li> <li class="grado-item"> <a class="enlace" href="#" id="4">Metodología</a> <div class="grados-content" id="grados-content4"> content4 </div> </li> <li class="grado-item"> <a class="enlace" href="#" id="5">Salidad profesionales del Grado en Marketing</a> <div class="grados-content" id="grados-content5"> content5 </div> </li> <li class="grado-item"> <a class="enlace" href="#" id="6">Claustro docente</a> <div class="grados-content" id="grados-content6"> <h1> Claustro docente</h1> <br /> <p> Nuestro equipo docente combina perfiles de diferentes características:</p> <div class="lista"> <ul class="inline"> <li> Profesionales en activo que desempeñan su actividad ajena a la Universidad y que se prestan por su vocación docente a dar clase a nuestros alumnos.</li> <li> Profesores a tiempo completo en la Universidad que son doctores en sus materias.</li> </ul> </div> <br /> <div id="profes"> <div class="profe" id="1"> <div class="infoprof"> <h3 class="hfoto"> Raquel Ayesterán</h3> <a class="webenlace" href="http://raquelayestaran.com">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="https://es.linkedin.com/in/raquelayestaran">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div> <img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/raquel-ayesteran.jpg" /> <div class="masinfo"> <p> <strong>Área: </strong>Dirección Estratégica, Marketing, Comercial y Comunicación. Doctor en Marketing Integrado 360º. Directora de Grado.</p> </div> </div> <div class="profe" id="2"> <div class="infoprof"> <h3 class="hfoto"> Rafael Alé Ruiz</h3> <a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="#">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div> <img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/rafael-ale.jpg" /> <div class="masinfo"> <p> <strong>Área: </strong>Organización de Empresas. Doctor en Físicas.</p> </div> </div> <div class="profe" id="3"> <div class="infoprof"> <h3 class="hfoto"> Guillermo Arce</h3> <a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="https://www.linkedin.com/in/guillermo-arce-dr-phd-2b7623b?trk=nav_responsive_tab_profile">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div> <img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/guillermo-arce.jpg" /> <div class="masinfo"> <p> <strong>Área: </strong>Marca, Marketing, Ventas, Redes Sociales e Internet Doctor en UAX. Experto en Estrategia de Marca.</p> </div> </div> <div class="profe" id="4"> <div class="infoprof"> <h3 class="hfoto"> Beatriz Duarte</h3> <a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="https://es.linkedin.com/in/beatriz-duarte-monedero-67641682">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div> <img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/beatriz-duarte.jpg" /> <div class="masinfo"> <p> <strong>Área: </strong>Doctora en Ciencias Económicas y Empresariales, UCM.Analista Financiero. Responsable de Calidad del Grado en ADE.</p> </div> </div> <div class="profe" id="5"> <div class="infoprof"> <h3 class="hfoto"> Adolfo García</h3> <a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="#">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div> <img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/adolfo-garcia.jpg" /> <div class="masinfo"> <p> <strong>Área: </strong>Logística, Marketing y Ventas Experiencia profesional en: MINOLTA, TNT, TELEFONICA, MAFRESA. Licenciado en Ciencias Económicas y Empresariales.</p> </div> </div> <div class="profe" id="6"> <div class="infoprof"> <h3 class="hfoto"> Fidel Rodríguez</h3> <a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="#">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div> <img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/fidel-rodriguez.jpg" /> <div class="masinfo"> <p> <strong>Área: </strong>Ciencias sociales, Historia y Artes Doctor en Historia y Doctor en Sociología. Profesor universitario, UFV.</p> </div> </div> <div class="profe" id="7"> <div class="infoprof"> <h3 class="hfoto"> Jesús Sánchez</h3> <a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="#">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div> <img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/jesus-sanchez.jpg" /> <div class="masinfo"> <p> <strong>Área: </strong>Comercial y Marketing en ADE+MARKETING Doctor en Derecho, Comillas. Miembro del Comité Científico del Instituto de Investigación. TheScientificCommittee oftheAnnuals of Economicand Management, Universidad Católica Juan Pablo II de Lublin-Polonia.</p> </div> </div> <div class="profe" id="8"> <div class="infoprof"> <h3 class="hfoto"> Francisco Solá</h3> <a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="#">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div> <img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/matthew-foley-ryan.jpg" /> <div class="masinfo"> <p> <strong>Área: </strong>Marketing y Comunicación Licenciado en Ciencias Económicas y Empresariales, UCM. Experto en Marketing y Comunicación Publicitaria. Socio de la empresa "Acciones de Comunicación y Estrategia". Responsable de Calidad del Grado en Marketing, UFV.</p> </div> </div> <div class="profe" id="9"> <div class="infoprof"> <h3 class="hfoto"> Alfonso Jesús Torres</h3> <a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="#">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div> <img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/alfonso-jesus-torres.jpg" /> <div class="masinfo"> <p> <strong>Área: </strong>Administración de empresas Licenciado en Ciencias Económicas y Empresariales, UAM. Master en Dirección Comercial y Marketing,CEI. Master en Humanidades UFV</p> </div> </div> <div class="profe" id="10"> <div class="infoprof"> <h3 class="hfoto"> Inmaculada Puebla</h3> <a class="webenlace" href="#">a</a> <a class="mailenlace" href="#">a</a> <a class="linkedinenlace" href="https://es.linkedin.com/in/inmaculada-puebla-a398ba46">a</a> <a class="researchgate" href="#">a</a> <a class="facebookenlace" href="#">a</a> <a class="twitterenlace" href="#">a</a></div> <img alt="#" class="fotos" src="http://recursos.ufv.es/docs/personal-academico-ade-marketing/inmaculada-puebla.jpg" /> <div class="masinfo"> <p> <strong>Área: </strong>Tecnologías de la Información y Comunicación, Ventas, Marketing, Gestión Empresarial, Gamificación, Matemáticas etc. Doctora en Humanidades, UFV. Licenciada en Ciencias Físicas, especialidad Informática por la UCM. Máster de finanzas y marketing UPM. Alta experiencia en empresas tecnológicas.</p> </div> </div> </div> <div class="clear"> &nbsp;</div> <div id="grande"> <div id="conteneprof"> <i class="fa fa-times">&nbsp;</i> <i class="fa fa-chevron-left">&nbsp;</i> <i class="fa fa-chevron-right">&nbsp;</i> <img /> <div class="infocontenido"> <h3> &nbsp;</h3> <div class="clear"> &nbsp;</div> <a class="redenlace webenlace" href="#" id="iconoweb" target="blank_">a</a> <a class="redenlace mailenlace" href="#" id="iconomail" target="blank_">a</a> <a class="redenlace linkedinenlace" href="#" id="iconoli" target="blank_">a</a> <a class="redenlace researchgate" href="#" id="iconorg" target="blank_">a</a> <a class="redenlace twitterenlace" href="#" id="iconotw" target="blank_">a</a> <a class="redenlace facebookenlace" href="#" id="iconotw" target="blank_">a</a> <div class="clear"> &nbsp;</div> <div class="bio"> &nbsp;</div> </div> </div> </div> </div> </li> <li class="grado-item"> <a class="enlace" href="#" id="7">Perfil internacional del Grado en Marketing</a> <div class="grados-content" id="grados-content7"> content7 </div> </li> <li class="grado-item"> <a class="enlace" href="#" id="8">Alumni</a> <div class="grados-content" id="grados-content8"> content8 </div> </li> <li class="grado-item"> <a class="enlace" href="#" id="9">Vive la UFV</a> <div class="grados-content" id="grados-content9"> content9 </div> </li> <li class="grado-item"> <a class="enlace" href="#" id="10">Calidad y mejora del título</a> <div class="grados-content" id="grados-content10"> content10 </div> </li> </ul> </div> <div id="grados-contenido"> &nbsp;</div> </body> </html> 

Answer 1

我已經發現了錯誤，它不在js文件中，但是html本身（我有各種具有相同ID的元素，這就是為什么第二個腳本不能與第一個腳本一起工作）。

謝謝大家的幫助！

干杯。