0
まずはウェブサイトの機能を説明します。まずユーザーがテンプレートをクリックすると、データベースからdivに移動します。私はボタンを持っていて、そのボタンがクリックされた場合、その引き出されたテンプレートからdivが色を変えるべきです。私は今、さらにコードであることを説明します：Jquery - データベースから取得したhtmlにCSSを変更
テンプレートを引っ張っ：ボタンやテンプレートがある
<!DOCTYPE html>
<html>
<head>
<title>Template 1</title>
<link href="http://localhost/fyproject/public/templates/css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="logo">
<button id="realButton" type="button" class="btn btn-default" ></button>
<input id="logo_upload" type="file" id="files" visbility="hidden" style="opacity: 0;"/>
</div>
<form id="form1" runat="server">
<input type='file' onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
</form>
<div contenteditable="true" id="content" class="draggable ui-widget-content refresh"><p>hlo</p></div>
<div id="comments">
<form name="forma">
<textarea name="commentUser" id="commentUser" class="refresh" cols="40" rows="5">
Comments here...
</textarea><br>
<input type="submit" value="Ready!" id="send-data" /><!--onClick="writeComment(e);"-->
<div id ="editTxt" class="refresh" contenteditable="true">
This text can be by the user.
</div>
</div>
</form>
</body>
</html>
メインページ：テンプレートをクリックした後、
@extends('layouts.master')
@section('title', 'Website Builder')
<script type="text/javascript" src="{!! asset('js/template.js') !!}"></script>
@section('content')
<div class= "container template_class ">
@foreach ($templates as $template)
<a class="content-link" href="{{ asset($template->file)}}">
<img id = "image" src="{{ asset($template->image)}}"/>
</a>
@endforeach
<button id="color">hello</button>
<p>hello</p>
</div>
<div id="content-link2"></div>
</body>
<script type="text/javascript" src="{!! asset('js/template.js') !!}"></script>
</html>
@endsection
@show
だからそれはのdivのidの内部に挿入されています= "コンテンツリンク2"
のjQuery：
$(function() {
$('.content-link').click(function(e) {
e.preventDefault();
$('#content-link2').load($(this)[0].href, function() {
$('#content').draggable({
containment: "#content-link2",
scroll: false
});
});
});
return false;
});
$('#h').click(function(e) {
e.preventDefault();
var code = document.getElementById('content-link2').innerHTML;
console.log(code);
});
function writeComment(e) {
var comment = document.forma.commentUser.value;
e.preventDefault();
document.getElementById('comments').innerHTML = comment;
}
document.getElementById("content-link2").onmousedown = function() {mousedown()};
document.getElementById("content-link2").onmouseup = function() {mouseup()};
function mousedown() {
var code2 = document.getElementById("content-link2").innerHTML;
console.log(code2);
}
function mouseup() {
var code2 = document.getElementById("content-link2").innerHTML;
console.log(code2);
}
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
$(document).ready (function(){
$('#color').click(function(){
$('#content-link2 > p').css({"background-color": "yellow", "font-size": "200%"});
});
});
そして、一度ボタンを押すと、div id = "content-link2 with pタグがあります。私はいくつかのCSSを適用したいのですが、その内容は関係ありません。しかし今、私はボタンをクリックすると何も起こりません。
誰かが提案や解決策を投稿できますか？
'id = content-link2'で' div'の内容を掘り下げていますか？ – Ejaz
私のjsを見て、データベースからhtmlを引っ張ってid = content-link2のdivに挿入しています。この例ではボタンのクリックで何かを変更したいのですが、段落の背景色を変更しています –
ブラウザのコンソールにエラーがありますか？ – Ejaz