php - 单击后更改按钮颜色和功能

Question

我有一个绿色的加入按钮，用户可以通过它加入群组。然后，用户可以从登录的仪表板中查看他们加入的组。数据存储在数据库的 groups 表中。

我希望按钮在单击后变为红色并显示取消加入。

我知道每个链接有五种不同的状态:link、hover、active、focus 和 visited，虽然 visited 是正常选项，但我需要确保已登录的用户将始终看到红色的 Unjoin 按钮，即使他们清除他们的缓存或其他东西。

我是否需要让按钮与数据库进行通信以验证用户是否已加入群组，还是可以使用 javascript 或其他方式完成？

编辑

感谢@TanvirAhmed 提供以下代码。它部分起作用，注销用户看到绿色，登录用户看到红色。但是，登录用户总是会看到红色，而如果他们之前已经加入该组，他们应该只会看到红色。

@if(Auth::user() == '')

<form method="post" action="{{ route('groups.join') }}">
@csrf
<button class="btn btn-success" type="submit">Join Group</button>
<input type="hidden" name="group_id" value="{{ $group->id }}" />
</form>

@else

<form action="{{ route('groups.destroy', $group->id)}}" method="post">
@csrf
@method('DELETE')
<button class="btn btn-sm btn-danger" type="submit">Delete</button>
</form>

@endif

当单击红色删除按钮时，我只剩下重定向问题。

我不想在点击删除按钮后重定向用户，他们应该留在当前页面 {{ route('groups.show',$group->id)}} .

但是，我需要按钮操作来从组中删除(destroy)用户，所以我知道我需要 {{ route('groups.destroy', $group->编号)}}。

那么，我如何执行销毁路由并将用户留在当前页面上呢？

组 Controller .php

<?php

namespace App\Http\Controllers;

use App\Group;
use Illuminate\Http\Request;

// All Groups pages require login except 'show'
class GroupsController extends Controller
{

    public function __construct()
    {
        $this->middleware('auth', ['except' => 'show']);
    }

    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $groups = Group::where('created_by_user_id', auth()->id())->get();

        return view('groups/index', compact('groups'));
    }

    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function joined()
    {
        //@todo change query to show groups joined
        // $groups = Group::where('created_by_user_id', auth()->id())->get();
        // $groups = Group::with('joinedUsers')

        $groups = auth()->user()->groupsJoined()->get();

        return view('groups/joined', compact('groups'));
    }

    /**
     * Store the group that a user has joined in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function join(Request $request)
    {
        $request->validate([
            'group_id' => 'required',
        ]);

        $group = Group::find($request->get('group_id'));
        $group->joinedUsers()->attach(auth()->id());

        return redirect('groups/joined')->with('success', 'You joined the group!!');
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        return view('groups.create');
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)

    {
        $request->validate([
            'group_title' => 'required',
            'group_description' => 'required',
            'group_date' => 'required',
            'group_time' => 'required',
        ]);

        $group = new Group([
            'group_title' => $request->get('group_title'),
            'group_description' => $request->get('group_description'),
            'group_date' => $request->get('group_date'),
            'group_time' => $request->get('group_time'),
        ]);
        $group->save();
        return redirect('/groups')->with('success', 'Group saved!!');
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        // $group = Group::find($id);
        $group = Group::with('createdByUser')->where('id', $id)->first();
        return view('groups.show', compact('group'));
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        $group = Group::find($id);
        return view('groups.edit', compact('group'));
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        $request->validate([
            'group_title' => 'required',
            'group_description' => 'required',
            'group_date' => 'required',
            'group_time' => 'required',
        ]);

        $group = Group::find($id);
        $group->group_title =  $request->get('group_title');
        $group->group_description = $request->get('group_description');
        $group->group_date = $request->get('group_date');
        $group->group_time = $request->get('group_time');
        $group->save();
        return redirect('/groups')->with('success', 'Group updated!');
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        $group = Group::find($id);
        $group->delete();
        return redirect('/groups')->with('success', 'Group deleted!');
    }
}

Answer 1

在你的 Blade 中你可以这样使用..

@if(Auth::user()=='')
///your join/green button
@else
//your red /unjoin button
@endif

试试这个，让我知道那里发生了什么留在显示页面上从下面的代码中替换您的 Controller 代码

public function destroy($id)
    {
        $group = Group::find($id);
        $group->delete();
        return back();
    }

在删除之前确认也是一个好习惯，如下所示

<form action="{{ route('groups.destroy', $group->id)}}" method="post">
@csrf
@method('DELETE')
<button class="btn btn-sm btn-danger" type="submit" onclick="return confirm('Are you sure you want to delete?')">Delete</button>
</form>