Question

https://gyazo.com/aa49eb6d6849b3adabb8924aa9e40594

我有图中的元素，我想让用户选择在哪个元素中添加半列来添加文本，但我不知道如何让他们选择一个元素然后根据它添加选择。

var addDetail = document.getElementById('addDetail');
var clauseInput = document.getElementsByClassName('clause');
document.addEventListener('click', function(e) {
        e = e || window.event;
        var target = e.target || e.srcElement;
        if(target == clauseInput[0] || target == clauseInput[1] ||
           target == clauseInput[2] || target == clauseInput[3] ||  
           target == clauseInput[4] || target == addDetail) {
            document.getElementById('addDetail').style.display='inline-block';
            // createDetail();
            console.log(target);
        } else {
            document.getElementById('addDetail').style.display='none';
        }
}, false);

Answer 1

<强>更新

每次点击addDetail时，都不会搜索所有子句元素，而是 e.relatedTarget 非常适合您的问题，detailed documentation和更新代码段：

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Vollkorn+SC');

body{
	margin: 10%;
	margin-right: 15%;
	margin-left: 10%;
	margin-top: 5%;
}
h1{
	color: #3B3C3D;
	font-family: 'Vollkorn SC', serif;
	font-size: 2em;
	text-align:center;
}
h2{
	color: #3B3C3D;
	font-family: 'Vollkorn SC', serif;
	font-size: 1.5em;
	text-align:center;
}
#bottomClauses{
	clear: both;
	float: right;
}
/*CONTROL-PANEL*/
#controlPanel{
	float: inline-block;
	margin-top: 5%;
	margin-left: 20%;
	margin-right: 20%;
	margin-bottom: 15%;
	padding-bottom: 2%;
	border-radius: 10%;
	border-bottom: 0.1vw solid #3B3C3D;
}
.addClause{
	background-color: #2c3e50;
	margin-top: 5%;
	font-size: 0.75em;
	padding: 0.5em;
	border: 0;
	color: #FFF;
}
.addClause:hover{
	cursor: pointer;
	background-color: #000;
}
.addDetail{
	display: none;
	background-color: #2c3e50;
	margin-top: 5%;
	font-size: 0.75em;
	padding: 0.5em;
	border: 0;
	color: #FFF;
}
.addDetail:hover{
	cursor: pointer;
	background-color: #000;
}
/*FISHBONE*/
#fishBone{
	position: relative;
	float:right;
	top: 19.75vw;
	width: 100%;
	height: 0.2vw;
	background-color: #34495e;
}
#finalResult{
	position: absolute;
	/*float:right;*/
	left: 83.5vw;
	top: 44.25vw;
	width: 7.5vw;
	height: 7.5vw;
	padding: 1vw;
	text-align: center;
	color: #FFF;
	background-color: #7f8c8d;
	border-radius: 50%;
	border: 0.15vw solid #34495e;
}
/*NEW CLAUSE*/
.clauseDiv{
	display: inline-block;
	float:right;
	width: 5vw;
	margin-right: 12.5vw;
}
.clause{
	float: inline-block;
	position: relative;
	top: -3.5vw;
	right: 2vw;
	text-align: center;
	width: 5.8vw;
	height: 1.5vw;
	padding: 0.2vw;
	color: #FFF;
	background-color: #3498db;
	border-radius: 0.15vw;
	border: 0;
}
.strokeClause{
	position: relative;
	top: -5.75vw;
	transform: rotate(-25deg);
	background-color: #34495e;
	width: 0.1vw;
	height: 25vw;
	margin-left: 7.5vw;
	border: 0.05vw solid #34495e;
	border-radius: 0.1vw;
	float: inline-block;
	z-index: -1;
}
/*NEW CLAUSE REVERSE*/
.clauseDivReverse{
	float: inline-block;
	float:right;
	width: 5vw;
	margin-right: 12.5vw;
}
.clauseReverse{
	position: relative;
	top: 15.5vw;
	right: 2.5vw;
	float: inline-block;
	text-align: center;
	width: 5.8vw;
	height: 1.5vw;
	padding: 0.2vw;
	color: #FFF;
	background-color: #3498db;
	border-radius: 0.15vw;
	border: 0;
}
.strokeClauseReverse{
	position: relative;
	top: -9.75vw;
	transform: rotate(25deg);
	background-color: #34495e;
	width: 0.1vw;
	height: 25vw;
	margin-left: 7.5vw;
	border: 0.05vw solid #34495e;
	border-radius: 0.1vw;
	float: inline-block;
	z-index: -1;
}
/*NEW LEVEL ONE*/
.levelOneClauseReverse{
	margin-bottom: 5vw;
}
.levelOneTextReverse{
	border: 0;
	position: relative;
	font-size: 0.75vw;
	width: 13vw;
	top: 4.5vw;
	right: 12.75vw;
	border-bottom: 0.1vw solid #34495e;
	transform: rotate(-25deg);
}

＆＃13;

<body>
		<h1>Diagram Editor</h1>
		<div id='controlPanel'>
			<h2>Control Panel</h2>
			<input type='submit' name='addClause' value='Clause on TOP' class='addClause' id='addClauseTop'>
			<input type='submit' name='addClause' value='Clause on BOTTOM' class='addClause' id='addClauseBottom'>
			<input type='submit' name='addClause' value='Add Detail' class='addDetail' id='addDetail'>
		</div>
		<div id='fishBone'></div>
			<input type='text' name='clause' id='finalResult'>
		<div  id='topClauses'>
			<div class='clauseDiv'>
				<input class='clause' id='clause'>
				<div class='strokeClause'>
				</div>
			</div>
		</div>
		<div id='bottomClauses'>
			<div class='clauseDivReverse' >
				<input class='clauseReverse clause'>
				<div class='strokeClauseReverse'>
					<div class='levelOneClauseReverse'>
							<input class='levelOneTextReverse'>
					</div>
					<div class='levelOneClauseReverse'>
							<input class='levelOneTextReverse'>
					</div>
					<div class='levelOneClauseReverse'>
							<input class='levelOneTextReverse'>
					</div>
					<div class='levelOneClauseReverse'>
							<input class='levelOneTextReverse'>
					</div>
				</div>
			</div>
		</div>
		<script src="app.js"></script>
	</body>

＆＃13;

public function fileUpload(Request $request)

{

    $this->validate($request, [

        'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',

    ]);


    $image = $request->file('image');

    $input['imagename'] = time().'.'.$image->getClientOriginalExtension();

    $destinationPath = public_path('/images');

    $image->move($destinationPath, $input['imagename']);


    $this->postImage->add($input);


    return back()->with('success','Image Upload successful');

}

＆＃13;

Javascript让用户选择元素

1 个答案: